2022.07.21

p150~250

서두에 앞으로의 독서 및 독서 기록 방식이 바뀐다는 점을 명시해 두고 본문을 시작해야 할 것 같다. 이전까지는 책을 읽고 책의 중요한 부분을 발췌하여 정리하는 식으로 공부를 진행했는데 아무래도 시간이 너무 오래 걸리는 것 대비 얻는 것은 적은 듯 하여  '빠르게 전범위를 훑고 여러 번 반복하는 것'이라는 학습 목표에는 적합하지 않다는 판단을 내렸다. 해서 앞으로는 독서 분량을 더 늘리되, 꼭 많은 내용을 블로그에 남기지는 않아야 겠다고 생각을 했다. 그래서 앞으로는 아무래도 기록하는 양이 앞서 챕터들보다 현저히 줄어들 것 같다. 

5장 

컴포넌트 내부에서 DOM에 직접 접근해야 할 때는 ref 를 사용한다. 단 서로 다른 컴포넌트끼리 데이터를 교류할 때 ref 를 사용한다면 이는 잘못 사용된 것이다. 컴포넌트끼리 데이터를 교류할 때는 언제나 데이터를 부모 자식 흐름으로 교류해야 한다. 나중에 리덕스 혹은 context Api 를 통해 효율적인 교류 방법을 배운다. 함수 컴포넌트에서는 useRef 라는 Hook 함수를 이용한다. 

6장

반복되는 데이터를 렌더링하는 방법을 배우고 이를 응용하여 유동적인 배열을 다루어 보았다. 컴포넌트 배열을 렌더링할 때는 key 값 설정에 유의해야 한다. key 값은 언제나 유일해야 하며 key 값이 중복될 경우 렌더링 과정에서 오류가 발생한다. 상태 안에서 배열을 변형할 때는 배열에 직접 접근하여 수정하는 것이 아니라 concat, filter 등 배열 내장 함수를 사용하여 새로운 배열을 만든 후 이를 새로운 상태로 설정해 주어야 한다. 

7장 

컴포넌트의 라이프사이클 메서드 흐름을 배웠다.

컴포넌트의 라이프사이클 메서드 흐름

라이프 사이클 메서드는 컴포넌트 상태에 변화가 있을 때마다 실행하는 메서드이다. 이 메서드들은 서드파티 라이브러리를 사용하거나 DOM을 직접 건드려야 하는 상황에서 유용하다. 추가로 컴포넌트 업데이트 성능을 개선할 때는 shouldComponentUpdate 가 중요하게 사용된다. 

8장 

리액트에서 Hooks 패턴을 사용하면 클래스형 컴포넌트를 작성하지 않고도 대부분의 기능을 구현할 수 있다. 매뉴얼에서 새로 작성하는 컴포넌트의 경우 함수 컴포넌트와 Hooks 를 사용할 것을 권장하고 있으므로 앞으로 개발을 할 때에는 함수 컴포넌트의 사용을 첫 번째 옵션으로 두고 꼭 필요한 상황에서만 클래스형 컴포넌트를 구현해야 한다. 

9장 

리액트 컴포넌트 스타일링 방식에는 여러가지가 있다. CSS, Sass, CSS Module, styled-componets 가 대표적! 

css: 가장 기본 방식

Sass: 자주 사용되는 CSS 전처리기 중 하나로 확장된 CSS 문법을 사용하여 CSS 코드를 더욱 쉽게 작성할 수 있도록 해 줌.

CSS Module: 스타일을 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해 주는 옵션

styled-components: 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있게 해 줌.