목표 : React로 instagram clone coding UI구현과 기능 추가
목표 달성률
: 100%

사용한 주요 기능
: state & props를 통한 데이터 변경과 전달, function의 활용
Mock data로 데이터를 가져와 Component에 적용

배운 점

1. state & 사용과 효율성

지금까지 하드 코딩이 익숙했던 나에게 state와 props는
코드의 양을 줄여주는 역할 뿐 아니라 React가 어떤 흐름으로
돌아가는 지 파악할 수 있었던 출발점이었다.

내가 이해한 state란 Component 안에서 활용 수 있는 값이다.
state의 값을 변경하고 싶을 땐, setState()함수를 통해
값을 변경해줄 수 있다.

초기 state 값을 공백으로 지정함으로서 아무것도 없는 데이터로 만들고,
setState를 통해 이벤트에 들어있는 매 순간의 텍스트 데이터를
가져오겠다고 변경해줄 수 있었다.

setState를 적용 후 결과를 확인해보기 위해 console.log로
상태를 체크해줬고, 원하던 데이터가 들어오는 것을 확인했다.

setState는 함수에 담았다.
함수가 실행되면 setState의 값이 변경될 수 있도록 적용해줬다.

함수는 태그에 있는 이벤트에 부착해 이벤트가 일어나면
함수가 실행될 수 있도록 만들어줬다.

적용 순서 : 태그의 이벤트 발동 -> 함수 실행 -> setState 적용

2. props로 상위 Component data를 내려준다는 것.

Props란

부모 Component에서 선언한 state의 값을 자식 Component로
전달 가능하게 만들어 주는 것.

따로 Mock Data를 만들어 Mock Data의 내부 데이터를
fetch 함수를 이용해 가져와 map의 인자인 info로 사용해줬고,
댓글을 컴포넌트로 만들어 props로 전달해주기 위해
props명과 props로 전달해 줄 데이터를 작성해줬다.

전달받은 데이터를 변수 box에 담고, 자식 컴포넌트에서도 map을 활용해
각 피드에서도 username과 comment라는 json 데이터를 이용해 댓글을
구현할 수 있었다.