[데브코스 Day51] 2022.12.26

📖오늘 배운 것

<React>

Portals

: 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 방법

첫 번째 인자는 렌더링 할 수 있는 React 자식을, 두번째 인자로는 자식을 렌더링할 DOM엘리먼트를 받는다.

  const el = useMemo(() => document.createElement("div"), []);
  useEffect(() => {
    document.body.appendChild(el);
    return () => {
      document.body.removeChild(el);
    };
  });

  return ReactDOM.createPortal(
    <BackgroundDim style={{ display: visible ? "block" : "none" }}>
      <ModalContainer
        ref={ref}
        {...props}
        style={{ ...props.style, ...containerStyle }}
      >
        {children}
      </ModalContainer>
    </BackgroundDim>
  );

useReducer

: 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다.

reducer는 현재 상태와 액션 객체를 파라미터로 받아서 새로운 상태로 반환한다. 즉, reduce에서 반환하는 상태가 컴포넌트가 가질 새로운 상태인 것.

const [state, dispatch] = useReducer(reducer, initialState);

state는 컴포넌트에서 사용할 상태이고 dispatch는 액션을 발생시키는 함수이다.

첫번째 파라미터는 reducer함수이고 두 번째 파라미터는 초기값이다.

사용예시

const reducer = (state, action) => {
  switch (action.type) {
    case "INIT_POSTS": {
      console.log(action);
      return action.payload;
    }
    case "ADD_POST": {
      return [...state, action.payload.response.data];
    }
    case "DELETE_POST": {
      const payload = action.payload;
      return state.filter((item) => item.id !== payload.id);
    }
    default: {
      console.error("Wrong Type");
      break;
    }
  }
};

해당하는 case에 따라 return을 하게 된다.

호출할 땐

dispatch({ type: "ADD_POST", payload });

이런 방법으로 호출할 수 있다.

<css >

first-child랑 first-of-type 차이점

firsst-child : 자식 요소 중에 가장 첫 번째를 선택

first-of-type: 자식 요소 중에 해당 타입의 가장 첫번째를 선택, 특정 타입 엘리먼트에 대해서 카운트를 한다.

<div>
    <h1>div</h1>
    <p>p1</p>
    <p>p2</p>
</div>

위의 예시에서 p1의 글자 색을 파란색으로 바꿔보자.

/* 1*/ 
div p:first-child { 
color: blue; 
}

/* 2 */ 
div p:first-of-type { 
color: blue; 
}

1에서는 first-child를 2에서는 first-of-type을 사용했는데 1은 원하는 결과가 나오지 않고 2는 원하는 결과가 나온다.

왜냐하면 first-child는 div 하위의 p엘리먼트가 가장 첫 번째에 위치해야 원하는 결과를 얻을 수 있다. 하지만 위의 예시에서 첫 번째 엘리먼트는 div이기 때문에 원하는 대로 작동하지 않은 것이다.

반면 first-of-type의 경우 p엘리먼트를 기준으로 카운트하기 때문에 원하는 대로 작동한다. 즉, first-child는 타입에 관계없이 첫번째에 위치해야 원하는 대로 작동하고 first-of-type은 위치와 관계없이 타입을 기준으로 체크해서 카운트를 한다.

(만약 div h1:first-child 라면 의도한대로 작동하게 된다!)

<HTML>

canvas

:html 문서 내부에 그림을 그릴 수 있는 엘리먼트

getContext: 렌더링 컨텍스트 타입을 지정한다.

canvas.getContext('2d');

beginPath(): 선을 그리기 시작함을 지정
closePath(): 선을 닫아서 시작점과 끝 점을 잇는다.
moveTo(): 선을 그리지 않고 좌표를 이동
stroke(): 윤곽선의 스타일을 지정
linTo(x, y)(): 현재 위치에서 지정한 위치까지 선을 그린다.
...

이외에도 다양한 함수가 존재한다.

<JavaScript>

Object.assign

:객체들의 모든 열거 가능한 속성을 복사해서 대상 객체에 붙여넣는다.

Object.assign(target, ...sources)

target: 목표객체 - 출처 객체의 속성을 복사해 반영 후 반환할 객체이다.

sources: 출처 객체 - 목표 객체가 반영하고자 하는 속성들을 가진 객체

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget === target);
// expected output: true

💭느낀 점

어렵다! 로직도 어렵고... 내가 아는 리액트인데 내가 아는 리액트가 아니야.. 좀 많이 사용해보고 뜯어보고 해야 이해될 것 같다. 오늘 왜인지 인내심 바닥이어서 오류날 때마다 책상을 몇 번을 내려쳤는지... 오늘 많이 못한 부분은 내일 꼭 다해서 더 이상 안 밀려야지.. 내일은 힘내자!!!

저작자표시

'일상 > Today I Learned' 카테고리의 다른 글

[데브코스 Day53] 2022.12.28 (0)	2022.12.28
[데브코스 Day52] 2022.12.27 (0)	2022.12.27
[데브코스 Day 50] 2022.12.23 (0)	2022.12.23
[데브코스 Day49] 2022.12.22 (0)	2022.12.22
[데브코스 Day 48] 2022.12.21 (0)	2022.12.21

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

[데브코스 Day51] 2022.12.26

📖오늘 배운 것

💭느낀 점

'일상 > Today I Learned' 카테고리의 다른 글

📖오늘 배운 것

💭느낀 점

'일상 > Today I Learned' 카테고리의 다른 글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역