카운터(Counter) 만들기
📌 하나의 state를 여러 컴포넌트에서 사용할 경우, 공통 부모의 컴포넌트에 선언해야 한다.
- 형제 컴포넌트끼리는 state 공유 불가능 ❌
📌 State Lifting (state 끌어올리기)
: state를 계층 구조 위로 끌어올려서 아래에 있는 컴포넌트들이 모두 사용할 수 있도록 하는 방법
📌 데이터는 props를 이용하여 부모 컴포넌트 👉 자식으로 전달하여 사용
📌 카운터(Counter) 만들기
App.jsx (부모 컴포넌트)
- 현재 카운트 state 선언하기
- count 버튼 기능 함수 생성하기
- 버튼을 누르면 현재 숫자인 count에 해당 버튼의 숫자인 value를 연산
Viewer.jsx
- App 컴포넌트에서 count state를 props로 가져오기
Controller.jsx
- App 컴포넌트에서 count 버튼 기능 함수를 props로 가져오기
- 버튼 클릭 시 count 버튼 기능 함수 실행하기
- count 버튼 기능 함수의 인자값으로 현재 숫자와 연산할 값(value) 전달하기
출처
한입 크기로 잘라먹는 리액트