1.학습한 내용

1)컨텍스트 Context

해당 파일들을 components 폴더에 js파일의 형태로 만들어낸다.
이때 마지막에 export default 파일명 을 입력하지않으면
불러오기를 하였을때 작동을 하지않는다.

이렇게 파일들을 불러오고
Context 와 같이 해당 파일명을 사용을 하게되면

값마다 togglelang , lang 등을 써야했던 부분들을 입력할필요없이 원하는 화면을 불러오는것이 가능하다.

2)컴포넌트 활용하기

우선은 4가지의 컴포넌트가 포함되어있는 js파일에서

각각의 컴포넌트 부분만을 떼내어서 components 폴더에 jsx파일로 만들어낸다.

이렇게 만들어낸 컴포넌트들은

길게 쓸필요없이 간단하게

<AddNumberRoot></AddNumberRoot>
<DisplayNumberRoot></DisplayNumberRoot>

를 입력하는것만으로도

js파일에 길게 적을필요 없이 해당 화면을 구현하는것이 가능하다.

2.학습내용 중 어려웠던 점

컨텍스트를 사용하여 컴포넌트를 만들어서 실행을 시키게되었는데
제대로 화면이 나타나지 않는 오류가 생겼다.

3.해결방법

이는 수없이 쳐다보아도 발견이 되지않았던것을
강사님의 수업파일과 비교를 하는과정에서 발견하게 되었는데.
AddNumber 와 AddNumberRoot 컴포넌트 파일에서
render 부분이
AddNumber 에서는 remder.
AddNumberRoot 에서는 redner.
으로 오타가 나있었던것을 발견하였다.
이를 고치는것으로 문제가 해결이 되었다.

4.학습소감

이번에는 컴포넌트를 사용하는 방법중 컨텍스트를 사용하는 방식으로 하게되었다.
이 또한 컴포넌트 처럼 파일을 따로 만들어두면 불러오는것으로 실행이 가능한 방식이다.

컴포넌트를 사용할때와 가장 크게 차이가 느껴졌던점은
컴포넌트는 1가지의 기능을 가진 것을 불러온데에 비해서
컨텍스트를 사용할때는 다른 컨텍스트의 기능을 불러온 컨텍스트를 불러올때는 컨텍스트 내부에서 불러온 다른 컨텍스트를 추가로 불러올 필요가 없는 것을 배울수있었다.