React 구조 디자인 매뉴얼

react는 Dom이 아닌 JavaScript를 중심으로 생각한다.

=> 이 패러다임을 받아들여야한다.

더 효과적인 컴포넌트를 구성하는 방법

• 아토믹 디자인은 기획 설계 시 적용하고, 실제 구현단계에서는 적용하기 어렵다.
  때문에 구현 단계에서는 반대로 위에서 부터 아래로 뿌려주는 형태로 개발한다.
• 컴포넌트를 외부로 많이 뺀다고 해서 재사용성이 좋지 않았다.
  이후에는 모듈이라는 단위로 빼기 시작한다.

설계 원칙

1. 확장성과 재사용성 있는 코드
2. topic에 따른 코드 분리와 단일 책임을 가지는 컴포넌트를 만들어야함
3. 외부에 제어를 위임시키는것을 고려하자.

리액트에서 배열 선언하는 2가지 방법

1. 컴포넌트 안에 배열을 선언하는 방법
2. 컴포넌트 바깥에 배열을 선언하는 방법

• 방법을 선택하는 기준
• 컴포넌트 안에 있는 변수나 상수를 써야하는 경우는 배열을 안쪽에 선언하는 것이 좋다.
  ( = 클로저)
• 하지만 독립적이고 고정적인 데이터는 컴포넌트 바깥에 선언하는 것이 좋다.

리액트의 컴포넌트가 언제 다시 뿌려지는가

• 컴포넌트 안에 있는 state(상태)가 변경되었을 때
• 컴포넌트가 여러 개인 구조상에서 상위 컴포넌트가 변경되어서 re-rendering이 되면 하위 컴포넌트들도 리렌더링을 한다.
• props가 변경이 되었을 때(내가 변수에 값을 바꾸는 것이 아니다 xxx )

우리는 효율적인 재사용과 안정적인 컴포넌트를 만들기 위해 Side Effect가 존재하지 않는 컴포넌트로 만들 필요가 있다. => 순수 컴포넌트 지향