(7-2) React - 상위 컴포넌트에서 값 도출하기

국비과정을 통해 배운 내용을 복습하는 용도로 제작하였습니다.

작성방식이 미숙하여 이미지 캡처로 소개한 점 양해 부탁드리겠습니다..

 

소스코드는 깃허브 URL에 공개해 두었습니다. 

https://github.com/awse2050/ReactTodo

 

이 예제는 이전 게시물에 이어서 포스팅합니다. 자세한건 상단 깃허브나, 이전게시물을 참고해주세요.

 

---

 

안녕하세요. 이전 게시물에서 컴포넌트간의 상하관계를 맺어줬었는데요.

출력하는 컴포넌트에서 직접 결과값을 도출했었습니다.이번에는 출력하는 컴포넌트 즉,

하위 컴포넌트에서 나타나는 값을 상위 컴포넌트에서 값을 도출할 수 있게해보려고합니다...

Todo를 만들기 위한 과정이며 배웠던 내용의 양이 좀 많아서 단계별로 쪼개서 포스팅하려합니다.

 

 

1.  우선 Component 폴더에 새롭게 todo1 폴더를 생성하겠습니다..

 

2. 다음으로 목록을 만들기 위해서 리스트를 담당하는 컴포넌트인 TodoList.js를 생성하겠습니다.

3. 그 다음 입력을 담당하는 컴포넌트를 생성했는데요. 

이전 게시글에서 만들었던 Ex1.js를 활용하겠습니다.  Ex1.js는 입력을 담당하는 컴포넌트였습니다.

* Ex1.js는 어제 포스팅햇던 내용에서 살짝 수정했습니다.

4. 이후 index.js를 생성하신 후 리턴값으로 TodoInput과 TodoList 컴포넌트를 설정합니다.

* 현재까지 진행과정을 보았을 때, 컴포넌트간 의 관계는 이렇습니다.App.js => index.js => (TodoInput - Ex1 ) , TodoList

TodoList와 TodoInput은 같은 선상에 존재하며 상위컴포넌트로 index.js를 갖지만

TodoInput만 Ex1 컴포넌트와 상하관계를 맺습니다.

이후 화면을 보면 Ex1컴포넌트에서 사용한 input의 설정을 보실수 가 있습니다. 

 

5. 이후 상위 컴포넌트가 하위컴포넌트에서 입력하여 나타나는 값을 받기 위해서

addTodo라는 변수명으로 Function을 만들었습니다. 그리고 이 function을 

TodoInput 컴포넌트에 props로 넘겨주었습니다. 

* 여기서 포인트는 index - TodoInput - Ex1의 컴포넌트 관계입니다.index에서 Ex1가 받아내는 입력값을 알아내기 위해서는 TodoInput을 거쳐줘야합니다.사실 Todo1 컴포넌트에서 Ex1 컴포넌트를 받아도 지금 하는 행위에 대한 결과는 바뀌지는 않습니다.단지 컴포넌트간의 흐름을 지켜놓기 위함이죠

 

6. TodoInput에서 props로" addTodo"를 받았기 때문에 해당 컴포넌트에서도 구조분해할당에 의해서 컴포넌트의 매개변수로 "addTodo"라는 props를 설정하게 되고,그 하위 컴포넌트인 Ex1에게도 addTodo를 전달합니다.

 

* Ex1에서는 버튼을 클릭하였을 때 , props로 설정한 "fn" 에 임의의 Function이 설정되어 있다면

입력한 텍스트를 그 function의 매개변수로 설정하게 했습니다.  

그래서 만약 위 사진처럼 "111" 을 작성하면 "111"이 Ex1 컴포넌트의 props로 설정한 

"fn" 에 매개변수로 전달이 되고, TodoInput에서 봤을 때 , fn은 props로 설정한 "addTodo"로 바뀌게 됩니다.

좀더 쉽게 해석해보면 하단에 보시는 내용과 같습니다.

이후 index.js에서 만든 Function인 "addTodo" 의 매개변수로 "111" 값을 받은거나 마찬가지인 셈이 됩니다.

따라서 상단의 콘솔창 처럼 " todoText : 111 "이 찍히게 되는 것 입니다.

 

---

단계별로 나누려 하니 뭔가 내용도 부족하고 의미없는 포스팅같아서

좀 더 속도를 내서 리액트 Todo만들기를 마무리 하고 구직활동을 시작해야겠습니다..