[TIL] 230619

React 심화

1. Styled Components
   모듈 설치 -> import 하여 사용이 가능하다!

   ```
   yarn add styled-components
   const 변수 = styled.태그
   ```

   js 컴포넌트로 만들 수 있다!

	const StBox = styled.div`
    width: 100px;
    height: 100px;
    border: 1px solid ${(props) => props.borderColor};
    margin:  20px;
  `;

  return (
    <>
    <StBox borderColor="red">빨간박스</StBox>
    <StBox borderColor="blue">파란박스</StBox>
    <StBox borderColor="green">초록박스</StBox>
    </>
  );

조건부 스타일링이 가능해진다.

2. useState
   배치 업데이트로 set을 한번에 모아서 판별한다.
   렌더링이 잦다 -> 성능 이슈

3. useEffect

• 예제 동작방식
  input에 값 입력 → value, state가 변경 → state변경으로 리렌더링 → useEffect 실행

useEffect(() => {
    함수
  }, [의존성배열]);

4. useRef

• DOM 요소에 접근할 수 있게 도와준다.
• 저장공간으로 사용, 해당 값은 렌더링을 일으키지 않는다.
  onChange에서 변경해주는 함수를 사용하면, 배치 업데이트 때문에 변화가 일어나고 반영되기 직전이라서 하나씩 늦는다.

5. useContext
   전역적으로 사용할 수 있게 만들어준다.
   props drilling이 발생하면 어디에서 props가 오는지 찾기 어렵다.

• 사용법
  export const 변수 = createContext(null);
  을 가진 jsx를 만들어준다.
  -> import하여 <변수.Provider >로 사용할 수 있다.

• 주의
  제공한 값이 변경되면 useContext를 사용하고 있는 모든 컴포넌트가 리렌더링 되기 때문에 메모제이션이 나왔다.

6. 최적화(React.memo, useCallback, useMemo)

• React.memo
  props가 변경되지 않는 한 리렌더링 되지 않게 만들어준다.

  export default React.memo(컴포넌트);

  But,
  함수도 일종의 객체라서 새로운 값을 새 주소에 저장하기 때문에 렌더링이 발생할 수 있다.
• useCallback

  const 변수 = useCallback(() => {
    }, [의존성배열]);

  함수 자체를 기억하게 만든다!
  스냅샷(해당시점)을 가지고 있어서(값을 가지고 있음) 해당 문제를 방지하기 위해서 의존성배열에 값을 담아주면 된다.