NYchicken's blog ;

컴포넌트에 다른 컴포넌트 담기 props children 사용해 컴포넌트 합성 (1) function BigComponent() { return ( 합성을 위한 부모 컴포넌트 입니다 JSX를 중첩해 임의의 자식을 전달 할 수 있습니다! ); } function SmallComponent(props) { return ( {props.children} 자식 컴포넌트입니다 ); } props 의 children 을 사용하게 되면 자식 엘리먼트를 그대로 출력할 수 있다. 이렇게 다른 컴포넌트에서 JSX를 중첩시켜 임의의 자식을 전달할 수 있게 되는 것이다. props children 사용해 컴포넌트 합성 (2) function SplitSection() { return ; } function SideSectio..

리액트는 기본적으로 단방향 데이터 흐름을 가진다. 그렇기 때문에 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터로만 형태, 타입을 확인할 수 있다. 해당 데이터가 state로 전달받은 것인지 혹은하드 코딩으로 입력된 데이터인지는 확인이 불가능하다. 상태(state) 끌어올리기란? 상위 컴포넌트의 상태 변경 함수 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행하는 것이다. 동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야할 필요가 있다. 이땐 가장 가까운 공통 조상(컴포넌트)에서 state를 끌어올리는 것을 권장한다. 간단한 예제 참고! // 상위 컴포넌트 function LiftingState() { let [todo, setTodo] = useState([]); cons..