4 주차 회고 (주특기: 리액트)

이번 주부터는 회고를 다른 형태로 작성하려고 한다.

기존에는 한 주에 어떤 일을 했었는지 적었는데, 이번 주부터는 내가 공부하면서 헷갈렸던 내용 또는 특별한 에피소드 위주로 작성할 예정이다.

 

---

컴포넌트 분리

나를 처음 당황하게 했던 내용은 컴포넌트 분리 기준이다.

컴포넌트: 사용자 인터페이스(UI)를 구성하는 빌딩 블록

기준이 명확하게 있으면 좋은데 그런게 아니다보니 폴더 구조 잡는거에서 오랜 시간을 소모했었다.

우선 순위를 어떻게 하면 좋은지? 재사용성, 기능별, 가독성 등등..

 

사실 위에 모두 다 고려하면서 작성하면 좋은데 아직까지는 모든 걸 만족하는 파일 구조를 찾지 못했다..ㅎㅎ

그래서 기술 매니저님과 리액트 강의해주신 원장님께 질문 했었는데 대부분 기능(모듈), 재사용성에 중점을 두시는 거 같았다.

(기능적인 독립성(모듈), 반복적인 요소(재사용성))

---

State

리액트를 배우면서 가장 흥미로웠던 내용이 state이다.

상태(State)
: 컴포넌트 내에서 변할 수 있는 값, 주로 사용자의 상호작용에 의해 변경되는 데이터를 의미
: 동적인 데이터를 다룰 때 중요한 역할
: 상태를 효율적으로 관리하면 컴포넌트가 올바르게 업데이트 되고, 외부 변화에 잘 대응할 수 있음

다른 언어들에서 접해보지 못했던 개념이라서 그런지 처음에는 너무 낯설고, 어렵게 느껴졌는데 수업도 듣고, 과제도 진행하다보니 지금은 많이 익숙해졌지만 아직도 제일 어려운 내용인 거 같다.

 

---

Props

Props
: 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 속성(데이터)
: 컴포넌트 간의 데이터 흐름을 구성
: 읽기 전용(immutable)이며 컴포넌트 내부에서 변경 불가

사실 이 개념은 중요하긴 하지만 어렵지는 않았다. (다른 언어들에서도 있는 개념이라서 쉽게 이해하고 넘어갔었음)

---

리렌더링 발생 조건

1. state(상태) 변경
2. 새로운 props 유입
3. 기존 porps 업데이트: 부모의 props가 업데이트 되면, 자식 컴포넌트도 재렌더링
4. 부모 컴포넌트 재렌더링

리액트에서 제일 나를 고민하게 만들었던 내용이다.

 

과도한 재렌더링은 성능 저하의 원인이 되기 때문에 필요할 때만 재렌더링 될 수 있도록 해야한다고 한다.
(최적화 해야 함!)

해당 문제를 해결하기 위해서는 리액트 hook을 잘 활용해야 하는데 아직까지는 제대로 사용하고 있는지 모르겠다..ㅎㅎ
이것도 더 연습하면 좋아지지 않을까..? ><

 

 

총 회고

Kepp

• 코드 개선
  • 과제 제출 이후에도 혼자서 코드 리뷰를 하면서 코드를 개선함

Problem

• CSS 사용법 미숙
  • 아직까지는 CSS 사용법이 미숙한 거 같음

Try

• 연습하기
  • 과제 외에도 클론 코딩을 통해 CSS 문법 이해 및 익숙해지기