2024.01.24 TIL

CSS-in-JS

자바스크립트로 CSS 코드를 통해서 작성하는 방식

styled component는 말그대로 스타일된 ‘컴포넌트’이기 때문에 대문자로 시작해야한다. 그렇지 않으면 적용이 안됨.

만든 후 html태그 처럼 사용한다.

import React from "react";
import styled from "styled-components";

const StBox = styled.div` //styled.p styled.span 등등
  width: 100px;
  height: 100px;
  border: 1px solid green;
  margin: 20px;
`;

function App() {
  return <StBox>박스</StBox>;
}

export default App;

 

React Hook

useState

기존 업데이트 방식은

set을 천번 실행하든 모아서 한번만 실행

함수형 업데이트 방식은

명령을 다 모아서 순차적으로 한번씩 다 실행함. (Batch Update)

 

useEffect

컴포넌트가 렌더링 될 때마다 실행됨

• 렌더링 될 때, 특정한 작업을 수행해야 할 때 설정하는 훅
  • 컴포넌트가 화면에 보여졌을 때
  • 컴포넌트가 화면에서 사라졌을 때 (return) → clean up

의존성 배열 (Dependency Array)

• 이 배열에 값을 넣으면, 그 값이 바뀔때만 useEffect를 실행한다.
• useEffect 에서 함수를 1번만 실행시키고자 할때는 의존성 배열을 빈 배열로 둔다.

useEffect(() => {
    console.log("hello useEffect");
  }, []); //의존성 배열이 없기 때문에 맨처음 실행될때만 호출

useEffect(() => {
    console.log(`hello useEffect : ${value}`);
  }, [value]); //value값이 바뀔때만 호출

 

마운트는 화면에 데이터가 나타나는 것을 의미한다. 컴포넌트가 나타나는 것을 마운트라 하고 삭제 될 때는 언마운트라고 한다.

 

useRef

• DOM 요소에 접근할 수 있도록 하는 훅이다.
• 이렇게 설정된 ref 값은 컴포넌트가 계속해서 렌더링 되어도 unmount(컴포넌트 죽는다는 뜻) 전까지 값을 유지한다.
• state는 리렌더링이 꼭 필요한 값을 다룰 때 쓰면 된다.
• ref는 리렌더링을 발생시키지 않는 값을 저장할 때 사용한다.

useContext

Context = 전역적인 어떤 것 → 전역 데이터를 관리할 수 있다.

context API 필수 개념

• createContext : context 생성
• Consumer : context 변화 감지
• Provider : context 전달(to 하위 컴포넌트)

context 폴더안에 이름.js 컨텍스트 파일 생성 후 안에 create컨텍스트 해줌(export)

부모 컴포넌트에서 provider로 값 전달, 자식에서는 useContext로 전역컨텍스트 값 받아서 사용

 

React.memo

• 컴포넌트를 메모리에 저장해두고 필요할 때 갖다 쓰게 됨 → 메모이제이션

부모컴포넌트가 리렌더링 되면 자식컴포넌트 들도 모두 리렌더링 -> 불필요한 렌더링이 발생하지 않도록 최적화하는 방법

1. memo(React.memo) : 컴포넌트를 캐싱
2. useCallback : 함수를 캐싱
3. useMemo : 값을 캐싱

export default React.memo(Box2)

내보낼 때 react.memo로 감싸서 내보냄

이렇게 하면 부모 컴포넌트의 state의 변경으로 인해 props가 변경이 일어나지 않는 한 컴포넌트는 리렌더링 되지 않는다.

 

useCallback

인자로 들어오는 함수 자체를 기억(메모이제이션)

const initCount = useCallback(() => {
    console.log(`${count}에서 0으로 변경`);
    setCount(0);
  }, [count]);

 

useMemo

• value에 대한 메모이제이션