오늘은 .. TodoList 혼자 만들기를 해봤다.
강의를 몇번을 봤는데 왜 혼자 못만들까
너무 슬프다.
9시 이후에는 라이브코딩을 하며 context api 를 배웠다.
대충 설명해보자면 props 를 지옥까지 내려주기 싫어서 사용하는 녀석인데,
이런식으로 index.js 에 TodoListProvider 라는 컴포넌트를 만들어주었다.
그래서 TodoListProvider 는 뭐냐...
안에 들어가보자.
이런녀석이였다.
TodoListProvider 라는 녀석은 {children} 이라는 녀석을 받고 있었고, useState로 todoList를 조종하고있었다.
어? 근데 뭔가 이상하다. return 에 TodoListContext.Provider라는 컴포넌트가 있다.
이자식은 어디서 왔지??
그렇다.. TodoListContext 는 createContext로 만들어진 컨텍스트라는 녀석이였다.
일단 이게 머 어떻게 동작하는지는 모르겠고.. 아무튼 TodoListContext.Provider 라는 컴포넌트 안에 children으로 뭔가 들어가있다.
이건 TodoListProvider 라는 녀석이 받아온 녀석이였고,
저 안에 들어있는 ColorModeProvider 와 App 이였다.
결국 TodoListContext.Provider 안에 ColorModeProvider 와 App 이 있는데, 이녀석들에게 props를 내려준다.
어떤 props??
바로 value 라는 이름으로, [todoList, setTodoList] 를 내려주고 있었다 !!
아하, 그럼 우리는 ColorModeProvider와 App 안에서 value라는 이름으로 [todoList, setTodoList] 를 사용할 수 있게 된것이다!
후.. 이제 대충은 알겠다.
그럼 저 내려준 value를 쓰는 곳을 찾아가보자.
엥? 갑자기 왜 TodoInput.js 파일로 뛰어넘어왔지??
여기서 왜 우리가 개고생하면서 context api 를 사용하려고 했는지 알 수 있다.
일단 TodoInput.js 라는 녀석의 경로를 살펴보자.
App.js > MainContetn.js > TodoInput.js 로 들어간다.
오.. 우리는 App.js 한테만 value를 줬는데 그 아래에 있는 녀석들도 쓸 수 있는것이다!!
이게 바로 ... context api...
쓰는법은 아래와 같다.
가져온 todoList 와 setTodoList 를 useTodoListContext() 로 가져온다.
엥? 근데 useTodoListContext()라는 녀석은 어디서 나온걸까?
들어가보면 useTodoListContext 라는 이름의 함수로 TodoListContext값을 받는 useContext를 만들어 준 것 이였다.
결국 우리는 props 를 통해 상위 컴포넌트에서 하위 컴포넌트로 정보를 내려주는 방법이 아닌! context api 를 통해 정보를 내려주었다.
다음에는 redux야..
