리액트 컴포넌트 2

[새싹 성동 2기] 4-2. 리액트 컴포넌트(3)

목차 1. 리액트 컴포넌트의 기본 구조            2. 컴포넌트의 상태 관리                       3. 컴포넌트의 동작과 생명 주기           4. 컴포넌트 간의 상태 전달 방법          5. 컴포넌트의 DOM 참조                     6. 컴포넌트의 동작과 사용자 인터렉션    [4] 컴포넌트 간의 상태 전달 방법 (1) 상태 내리기(Lifting State Down) - 부모 컴포넌트의 상태 변수(state)를 자식 컴포넌트의 props 변수로 전달 - 부모 컴포넌트의 상태 변수가 변경되면 부모-자식 컴포넌트 모두 리렌더링// 상태(state)를 가진 부모 컴포넌트function ParentComponent() { const [count, s..

[새싹 성동 2기] 4-2. 리액트 컴포넌트(2)

목차 1. 리액트 컴포넌트의 기본 구조            2. 컴포넌트의 상태 관리                       3. 컴포넌트의 동작과 생명 주기           4. 컴포넌트 간의 상태 전달 방법          5. 컴포넌트의 DOM 참조                     6. 컴포넌트의 동작과 사용자 인터렉션  [1] 리액트 컴포넌트의 기본 구조 (1) 부모-자식 컴포넌트 - 부모 컴포넌트는 다른 컴포넌트를 포함하고, 자식 컴포넌트에 데이터를 전달하는 역할 - 부모는 자식 컴포넌트를 렌더링하고, 그들에게 필요한 props를 전달하여 UI를 동적으로 구성함// 부모 컴포넌트function Parent() { const [message, setMessage] = useState("He..