리액트 기본개념.md

리액트 기본 개념

parsing, rendering 차이점

parsing(파싱)

• 웹 페이지의 내용을 분석하고 해석하는 과정이고, 웹 브라우저는 HTML을 DOM 트리로 파싱한다.
• 문서를 파싱한다는 것은 코드에서 사용할 수 있는 구조로 document를 변환한다는 것이다.이를 위해 토큰화를 거쳐 이 토큰을 사용해 문서 구조를 이해해 DOM트리, CSSOM 트리로 표현된다.

rendering(렌더링)

• html css js로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것이다.

render()

• 함수 컴포넌트가 호출이 되면 render함수가 호출된다. 또한, props, state가 변경될 때 예전에 렌더링된 요소와 새로 return된 요소를 비교한다.
• rerendering state, props가 변경 시 render함수가 발생한다.

React.Fragment

function MyButton() {
  return <></>;
}
export default MyButton;

• React.Fragment의 장점은 의미없는 div 태그를 사용함으로써 실제 DOM에 노드를 추가하지 않아도 된다.

Props, State

• props는 컴포넌트에 전달되는 값이다.
• state 컴포넌트의 내부적으로 가지고 있는 값이다.
• 리액트에서 부모 컴포넌트와 자식 컴포넌트 간의 데이터 전달은 단방향으로 이루어진다. 즉, 부모에서 자식으로만 props를 통해 데이터를 전달할 수 있다. 하지만 자식 컴포넌트에서 부모 컴포넌트로 데이터를 보내야 하는 경우가 있다. 이때 사용하는 방식이 바로 "부모 컴포넌트에서 자식 컴포넌트에 props로 setter 함수를 전달하는 방식"이다. 이는 자식에서 부모로 실제 데이터를 전달하는 것이 아니라, 부모의 상태를 변경하게 되므로 부모 컴포넌트의 상태가 업데이트되어 자식에 영향을 미치게 된다.

useState

• useState는 상태를 변경하는 hooks이다. setState 함수로 state 값을 변경할 때마다 컴포넌트는 다시 렌더링 된다.

useEffect

• side effect를 만들기 위한 훅이다. 또한, 의존성 배열이 있다.

useMemo & useCallback(메모이제이션)

• 리액트에서는 state나 props가 변할 경우 리렌더링이 발생하는데 이때 변하지 않아도 되는 변수들도 새롭게 선언이 되는 문제가 있다. 이때 메모이제이션을 사용한다.
• 같은 값을 리턴하는 함수를 반복해서 호출할 때, 맨 처음 값을 계산해서 메모리에 저장해서 꺼내 쓰는 기법이다. 즉, 자주 쓰는 값을 맨 처음에 캐싱해 둬서 값이 필요할 때 마다 사용하는 것이다.
• useMemo & useCallback은 렌더링 오버헤드를 줄일 수 있다.
• useCallback은 함수를 메모이제이션 할 때 사용한다.

useRef

• ref를 통해 생성된 참조 객체에서 실제 DOM 요소에 접근할 때 사용한다.
• 리액트 외부에서 발생하는 이벤트에 사용한다.
• 리렌더링에 영향을 받지 않는 값을 저장하는 데 사용한다. ex) 스크롤 위치 조작, 클립보드 DOM text를 저장
• 이전 상태 값을 기억하는 용도로 사용됨

ref vs state

ref

• ref를 바꾼다고 해서 리렌더링이 일어나지 않으며 변수 값이 유지됨
• 주로 DOM 요소에 직접 접근할 때 사용된다.

state

• state 변경되면 렌더링 발생하고 모든 변수가 초기화된다.
• 컴포넌트 렌더링에 직접 영향 미치는 데이터를 관리할 때 사용한다