🚩 React의 가장 큰 장점은 컴포넌트화이다.
독립적인 UI를 컴포넌트화 시키고 이를 재사용한다는 점인데 페이지가 어떻게 구성되어 있는지 한 눈에 파악하기 쉽고 코드의 유지보수 면에서도 너무 좋다.

그래 이론은 나도 자~알 알겠다 ㅎㅎ...
그런데 막상 내 코드를 보니 언제? 어떻게? 적용해야할 지도 감이 잘 안온다.

map함수를 이용하여 코드를 간결하게 바꿔보자

1. 반복되는 UI구조 찾기

👾 찾았다!
className이 profile인 부분이 반복적으로 사용되고 있었다

1. 스토리
   

2. 추천
   

🤔 여기서 잠깐!
scss nesting 구조로 css를 작성해놓았기 때문에 스토리와 추천 레이아웃이 다르지만 같은 이름을 쓸 수 있다.

2. 컴포넌트화

👾 어떻게 컴포넌트화 시킬까?

• 3가지 내용 빼고 구조가 모두 같다.
  (1) 프로필 이미지 주소
  (2) 스토리를 올린 id
  (3) 언제 스토리를 올렸는지 시간
• 내용이 달라지는 부분만 추려서 data 파일에 따로 관리한다.

1. 스토리
   

2. 추천
   

3. 파일 불러오기

1. useState

1. 불러올 데이터를 관리할 수 있게 useState를 사용한다
2. 초기값을 빈배열로 선언한다
3. set함수로 최신의 데이터를 가져올 수 있도록 한다.

2. fetch 메서드 사용하기

1. fetch 메서드로 데이터를 받아온다
2. json 형태의 파일을 자바스크립트 객체로 변환한다
3. useState의 set함수로 최신의 배열을 불러온다

3. useEffect

1. fetch 메서드로 불러온 데이터를 모든 렌더링이 완료된 후에 호출 할 수 있도록 한다
2. 의존성 배열에 빈배열을 넣어주어 첫 번째 렌더링 이후에만 실행되고 그 뒤에는 실행되지 않도록 한다

4. 완성된 화면

👏 뿌듯 그자체!
이게 정말 내가 만든 거라니 감격스러워서 눈물이 나려고 한다.
진짜 하면 되는구나! 라는 생각 밖에 안든다.
뭐만 치면 계속 빨간줄 뜨고 terminal은 빨간 error가 떠서 슬프고 화가나고 좌절했던 과거가 생각난다.

지금의 상태는 초록 성공! ㅎㅎㅎ

계속 뜨는 오류에 당황하지 않고 혹시 내가 어떤 부분을 잘못 썼는지...
혹은 개념을 헷갈리고 있어서 코드가 이상하게 돌아가고 있는지 파악하는 일들이 가장 큰 공부가 되는거 같다.