[멋쟁이 사자처럼 프론트엔드 스쿨] 65일차 TIL - 선언형vs명령형, 렌더링과 커밋, 컴포넌트 상태와 업데이트, props/state

🍰 완전 이해 못 했던 수업. 예습의 필요성을 철저히 느꼈다.

🍴 선언형 vs 명령형 프로그래밍

: 프로그램을 작성하는 두 가지 주요 접근 방식. React는 선언형 프로그래밍 패러다임을 따름.

🍫 선언형 프로그래밍(Declarative Programming)

• 원하는 결과를 명시함
• '무엇'을 할 지 설명함
• 상태를 기반으로 UI를 설명함
• 리액트 = 선언적 프로그래밍 도구

🍫 명령형 프로그래밍(Imperative Programming)

• 목표를 달성하기 위한 단계별 지침을 제공함.
• '어떻게' 할 지 설명함.
• UI를 직접 조작하는 방식임.
• 전통적인 DOM 조작 방식.

 

🍴 Rendering 그리고 Commit

🍫 React의 렌더링 과정

1. Trigger - 렌더링 프로세스 시작하는 단계. 주로 state 변경이나 부모 컴포넌트의 리렌더링으로 인해 발생.
2. Render - 컴포넌트를 호출하여 새로운 UI를 계산하는 단계(이전 렌더링 이후 변경된 속성 계산). 실제 DOM 변경X, 가상 DOM 생성.
3. Commit - 계산된 변경사항을 실제 DOM에 적용하는 단계. React가 DOM을 업데이트하고 참조를 업데이트함.

 

🍴 컴포넌트 상태와 업데이트

🍫 컴포넌트 상태와 업데이트 방식에 따른 React 컴포넌트의 여러 유형

1. 아토믹 컴포넌트(Atomic Component)

• 표현 목적의 컴포넌트(Presentational Component)
• Stateless Component
• 주로 UI 렌더링에 사용됨.
• 자체적인 상태를 가지지 않음 .
• props를 통해 데이터를 받아 표시하는 역할을 함.

2. 컨테이너 컴포넌트(Container Component)

• Stateful Component
• 상태를 가지고 있음.
• 상태를 관리하고 업데이트하는 로직을 포함함.
• 주로 fetching, 상태 관리 등의 역할을 담당함.

3. 오가니즘 몰레큘 컴포넌트(Organism Molecule Component)

• 아토믹 디자인 시스템에서 파생된 개념
• 더 복잡한 UI 구조를 구성하는 데 사용됨.
• 아토믹 컴포넌트들을 조합하여 더 큰 단위의 UI를 만듦.

🍫 컴포넌트 상태 관리와 업데이트:

• Stateless 컴포넌트는 자체 상태가 없어 props 변경 시에만 리렌더링됨.
• Stateful 컴포넌트는 내부 상태를 가지며, 상태 변경 시 리렌더링이 발생함.
• Container 컴포넌트는 주로 상태 관리와 데이터 흐름을 제어함.
• 상태 업데이트는 setState() 또는 useState() 훅을 통해 이루어지며, 이는 컴포넌트의 리렌더링을 트리거함.

 

🍴 props, state, derived state

: React에서 다루는 데이터는 속성(props)과 상태(state)다.

🍫 속성(props)

• 부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터.
• (자식 컴포넌트에서)읽기 전용 -> 수정 X
• 컴포넌트 간 데이터 전달에 사용됨.
• 컴포넌트의 재사용성을 높임.

🍫 상태(state)

• 컴포넌트 내부에서 관리되는 데이터.
• 읽기, 쓰기 가능 -> 수정 O
• 컴포넌트의 동적인 데이터를 관리하는 데 사용됨.

🍫 파생된 상태(Derived State)

• 컴포넌트 속성 또는 상태로부터 파생된 상태
• 기존의 props나 state를 기반으로 계산되는 값임.
• 불필요한 state를 줄이고 코드의 일관성을 유지하는 데 도움이 됨.