안녕하세요
https://www.udemy.com/course/react-next-master/
강의에서 이런 걸 만들어본다고 하길래, 세팅만 해놓고 강의 보기 전에 먼저 만들어봤어요
우선 현재 카운트를 나타내는 컴포넌트와 버튼이 있는 컴포넌트로 분리시키고 각각 Viewer.jsx, Controller.jsx로 이름 지었습니다. Controller.jsx에서 버튼을 누르면 그 값을 props를 통해 Viewer.jsx 전달하면 될 것 같습니다.
처음에는 Controller.jsx에서 버튼의 값을 직접 끌어다가 쓸 생각을 했습니다만, Controller.jsx에 있는 버튼에서 받아온 value값을 Viewer.jsx로 넘길 수 있는 방법이 생각나지 않았어요
근데 학교 프로젝트에서 머리 깨져가면서 배웠던 것이 생각나서 바로 써봤습니다.
바로바로
값을 저장할 useState와 onClickHandler 함수를 Viewer 컴포넌트와 Controller 컴포넌트를 둘 다 렌더링 하는 최종(?)컴포넌트에 선언하는 것입니다. 여기서는 App컴포넌트에서 둘 다 끌어오기 때문에 App 컴포넌트에 핸들러 함수와 useState를 만들었어요
동작 순서를 미리 정리해 봅시다.
1. App 컴포넌트에서 값을 받아올 onClickHandler 함수와 저장할 useState를 선언한다.
2. onClickHandler 함수를 Controller 컴포넌트에 전달하고, 각 버튼에 해당하는 값을 받아서 useState를 통해 저장한다. (Controller 컴포넌트에서 받은 값을 App 컴포넌트로 넘기는 것)
3. 다시 App컴포넌트로 돌아와서, useState를 통해 저장한 값을 Viewer 컴포넌트에 매개변수로 전달해서 렌더링 한다.
App 컴포넌트에서 onClickHandler 함수를 props를 통해 Controller 컴포넌트로 보냅니다. onClickHandler 함수는 value 값을 추적해서 setNumber의 인자로 전달합니다.
Controller 컴포넌트에서는 매개변수 handler를 통해 onClickHandler 함수를 받고 각 버튼에 전달합니다.
이렇게 되면 버튼을 클릭했을 때, handler가 실행되고, App 컴포넌트에 존재하는 상태변화함수 setNumber의 인자로 value값을 전달하게 됩니다. 즉 -1 버튼을 누르면 -1의 값이 App 컴포넌트의 setNumber 함수의 인자로 전달되는 것이죠.
왜냐??? onClickHandler 함수가 value값을 추적해서 setNumber의 인자로 전달하는 녀석이기 때문이죠!
App.jsx로 돌아왔습니다. 값을 누적시키기 위해서, setNumber의 인자로 number와 Controller에서 끌어온 값을 더해서 전달합니다.
이후 number을 Viewer 컴포넌트로 보냅니다
App 컴포넌트에서 받아온 값을 매개변수 number에 저장하고 최종적으로 렌더링 하면 끝입니다.
CSS 적용을 안해서 조잡해 보이지만 성능은 확실해요
누군가에겐 당연한 코드일 수 있으나,,, 리액트가 뭔지도 모를 때, 이 단순한 걸 이해하려고 몇 시간을 쏟았기에... 다시 한번 정리해 봤습니다.
결국 이렇게 다시 만나게 되는 걸 보면 헛된 삽질은 없는 것 같습니다. 감사합니다
'프로젝트' 카테고리의 다른 글
| 행복..사랑..건강... gif 만들기 (0) | 2024.04.17 |
|---|---|
| 🤔 (0) | 2023.10.15 |
| 개쩌는 덧셈 계산기 만들기 (0) | 2023.10.12 |