[Tech] 자식 컴포넌트의 props & React Hooks

자식 컴포넌트에서도 props를 변경할 수 있는가?

• 부모로부터 props를 받는 자식 컴포넌트에서 props 변경은 불가능하다.
• 그렇다면, 그런 식의 변경은 불가능할까?

useState 훅을 활용하여 바꿔보자

다음과 같이, 자식 컴포넌트에서도 값을 바꿔보자.

1. 부모 컴포넌트로부터 setState(상태 업데이트) 함수를 전달 받는다.
2. 자식 컴포넌트에서 호출받아 부모 컴포넌트의 상태 값을 변경한다.

---

React Hooks

• 기존에는 클래스 컴포넌트에서만 상태와 생명주기 관리 기능 등을 사용할 수 있었다.
• React 16.8 버전부터 React Hooks이 등장 함에 따라,
  함수형 컴포넌트에서도 사용이 가능해졌다.

React에 있는 다양한 훅들

• useState: 컴포넌트의 state(상태)를 관리
• useEffect: 컴포넌트가 렌더링 될 때마다 사이드 이펙트(side effect)를 처리
• useContext: 전역에서 사용할 수 있는 컨텍스트 객체를 생성
• useReducer: 여러 개의 상태 관리를 할 때 사용
• useRef: ref 객체를 생성하고, 렌더링 영향을 주지 않는 갑을 별도로 저장
• forwardRef: 부모 컴포넌트에서 자식 컴포넌트로 ref를 전달하는 hook
• useMemo: 특정 값을 메모이제이션함
• useCallback: 특정 콜백 함수를 메모이제이션함
• useLayoutEffect: useEffect와 비슷하나, 렌더링이 되기 전에 동기적 실행
• useId: 클라이언트와 서버 간, ID 불일치 방지를 위한 고유한 ID를 생성
• useTranstion: 특정 상태의 업데이트 우선순위를 낮추어 UI 반응성을 높임
• useDeferredValue: 특정 값의 업데이트를 지연시킴

---

✨ 출처

프론트엔드 기술 면접 질문

---