💎 React State
- React에서의 state란 컴포넌트 내부에서 관리되는 상태 값을 의미합니다. 컴포넌트가 생성 되고, 갱신될 때마다 변경될 수 있는 값이며, 이 값이 변경될 때마다 화면이 다시 렌더링됩니 다. state는 useState Hook을 사용하여 컴포넌트 내부에서 관리할 수 있으며, setState 함 수를 통해 값을 업데이트할 수 있습니다.
- React에서의 state는 컴포넌트의 상태를 저장하고, 필요에 따라 다시 렌더링하는 데 사용됩 니다. 사용자 인터랙션에 따라 컴포넌트 내의 상태가 변경되면, React는 이를 감지하고 변경 된 상태를 바탕으로 화면을 다시 렌더링합니다. 이를 통해 동적으로 변하는 UI를 만들 수 있 습니다.
💎 React Props
- Props는 React 컴포넌트에게 데이터를 전달하는 방법 중 하나입니다.
- Props는 부모 컴포넌트로부터 자식 컴포넌트로 전달되며, 컴포넌트 내부에서 변경할 수 없 는 읽기 전용 데이터입니다. - - Props를 사용하면 컴포넌트 간의 데이터 전달이 간단하고 유지보수하기 쉬워집니다. 또한 컴포넌트의 재사용성을 높일 수 있습니다.
💎 State lifting up : 상태 끌어올리기
- React에서는 상위 컴포넌트가 하위 컴포넌트의 상태를 직접 변경할 수 없습니다.
따라서 React에서는 하위 컴포넌트에서 발생한 이벤트를 상위 컴포넌트에서 처리하도록 하는 상태 끌어올리기 패턴을 사용합니다.
💎 Props Drilling : 상태 내리꽂기
- Props drilling은 React에서 사용되는 용어로, Props를 통해 데이터를 전달할 때, 하위 컴포 넌트에서 필요하지 않은 Props를 계속해서 전달하는 것을 의미합니다. 이는 코드의 가독성 을 떨어뜨리고, 유지보수를 어렵게 만들 수 있습니다. 따라서 Props drilling을 최소화하기 위해서는, 필요한 Props만을 전달하고, 필요하지 않은 Props는 하위 컴포넌트에서 직접 접 근하는 것이 좋습니다. 이를 위해서는 React Context나 Redux와 같은 상태 관리 라이브 러리를 사용하는 것도 좋은 방법입니다.
