250x250
Notice
Recent Posts
Recent Comments
Link
«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

y.developer

[TIL] Day 20 State & Props, Rendering 본문

카테고리 없음

[TIL] Day 20 State & Props, Rendering

y.developer 2023. 11. 1. 23:46
728x90

2023.11.01 수

 

리액트 입문 강의와 스탠다드 강의를 들었다.

실제로 React을 다뤄보며 어떤 매커니즘으로 작동하는지 알게 되었다.

 

Today

  • 리액트 입문 강의
  • 스탠다드 강의
  • 스탠다드 과제

 

 

학습내용

리액트 입문 강의

 

  • Props
  • Filter & Map
  • Slice & Splice
  • Reduce
  • State
  • Hook
  • 불변성&순수함수
  • 명령형 vs 선언형 프로그래밍
  • 렌더링 & 리렌더링

 

 

Props

prop drilling

어플리케이션에서 데이터를 전달하기 위해 필요한 과정을 설명하는 용어

컴포넌트 트리에서 데이터를 하위 컴포넌트로 전달하기 위해 중간 컴포넌트를 통해 프로퍼티를 내려주는 것을 의미한다.
이러한 중간 컴포넌트는 원하는 자식 컴포넌트에게 프로퍼티를 전달하기 위해 필요하지만, 해당 값을 직접 사용하지 않는 경우에도 프로퍼티를 받고 전달해야 한다.

 

 

장점

 

  • 명시적인 값 사용
  • 값 추적 용이
  • 코드 변경 파악 용이

 

단점

 

  • 프로퍼피 데이터 형식 변경의 불편함
  • 중간 컴포넌트에 불필요한 프로퍼티 전달
  • 누락된 프로퍼티 인지의 어려움
  • 프로퍼티 이름 변경 추척의 어려움

 

해결방법

 

  • Context API
  • Redux 또는 다른 상태 관리 라이브러리
  • Custom Hooks
  • Render Props 패턴과 Children props

 

 

props children (렌더링 최적화)

React는 JSX라는 문법을 채택하여 사용하고 있다.

JSX는 html과 유사한 문법으로 꺽쇠 사이에 타입과 속성을 부여해 프로젝트 구조를 짜는 목적으로 사용된다.

이러한 컴포넌트들 사이에는 포함관계를 설정할 수 있는데, 이때 상위 컴포넌트를 parent component, 하위 컴포넌트를 child component라고 부른다.

그리고 부모-자식 관계가 설정되면 부모 컴포넌트 내부에서는 children prop을 통해 자식 컴포넌트 정보에 접근할 수 있다.

 

 

Filter & Map + forEach

외부데이터(백엔드 값)을 받아서 필터 (jsx에 맞는 형태로) 후 가공

 

map

 

  • 가지고 있는 인덱스 수만큼 출력
  • 원래 데이터를 가공하여 출력
  • return O

 

filter

 

  • 조건에 해당되는 인덱스 수만큼 출력
  • return O

 

forEach

 

  • 각 배열 요소에 대해 제공된 함수를 한 번씩 실행
  • 일반적인 for문에서는 break, continue, return 등의 제어문으로 반목문 탈출이 가능하지만, forEach는 불가능
  • 콜백 함수에서 해당 명령이 실행될 뿐 값을 반환하지 않는다
  • return X

 

 

reducs

return 값이 누적된값 자리로 들어간다 

testArr.reduce(function(acc, cur) {
return acc + cur;
}

누적된값 : acc

현재값 : cur

 

 

slice & splice

slice(1, 4)

1index이상 4index이하 해당되는 item 추출

 

splice(1, 4)

1index부터 4번째index(=5index) 해당되는 item 추출

 

splice(2, 2, "a", "b")

2index부터 2번째index(=4index) 해당되는 item 추출, 그 이후 index당 할당된 값 하나씩 입력

 

 

State

setState()는 컴포넌트의 state 객체에 대한 업데이트를 실행한다.

state가 변경되면, 컴포넌트는 리렌더링된다.

 

state와 props의 차이점

state와 props (“properties”의 줄임말) 는 일반 JavaScript 객체

두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있다.

props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면,

state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리된다.

 

 

Hook

리액트의 다양한 기능들

 

 

불변성&순수함수

원시데이터

 

  • 숫자, 문자, 불리언...
  • 불변성 O
  • 기존의 공간의 내용은 바뀌지 않고, 새로운 공간에 내용을 할당
  • 걱정없이 진행하면됨

 

원시데이터가 아닌 것

 

  • 배열 객체, 함수...
  • 불변성 X
  • 기존의 공간 속 내용을 계속 바꿔서 할당
  • 주의해서 선언해줘야함 ▶ Spread Opertor(스프레드 오퍼레이터) 문법
  • 데이터 할당 과정이 다르다

 

리액트 생명주기(React Life Cycle)

Mounting / Updating / Unmounting

Render(갱신)은 <--Mounting / Updating--> 단계에서 발생된다.

component가 Rendering되는 조건은, State가 바뀌면 작동한다

 

  • 리액트는 화면을 렌더링할지를 State, Props의 변화에 따라 결정한다!
  • 단순 변화는 무시한다!

 

내부적으로는 변경되는데 렌더링은 진행되지 않아서 보이지는 않을 때

▶ 새로운 객체(다른주소, 다른공간)을 할당해야 한다.

 

* object (객체)

* {...obj} ▶ Spread Opertor(스프레드 오퍼레이터) 문법 ▷완전히 새로운 값으로 복사 및 할당

 

 

Component & Renderring 개념

Component

컴포넌트란 리액트의 핵심 빌딩 블록 중 하나로, UI 요소를 표현하는 최소한의 단위이며 화면의 특정 부분이 어떻게 생길지 정하는 선언체다.

컴포넌트를 생성하고 보여지고자 하는 UI 요소를 컴포넌트 내부에서 JSX를 통해 선언하면 이를 리액트가 화면에 그려준다.

즉 리액트에서 개발할 모든 애플리케이션은 컴포넌트라는 조각으로 구성된다.

컴포넌트는 UI 구축 작업을 훨씬 쉽게 만들어준다.

리액트의 컴포넌트기반 개발 이전에는 브라우저에서 동적으로 변하는 UI를 표현하기 위해 직접 DOM 객체를 조작하는 명령형 프로그래밍 방식으로 구현했다.

 

명령형 프로그래밍 (DOM)

어떻게(How)를 중요시여겨서 프로그램의 제어의 흐름과 같은 방법을 제시하고 목표를 명시하지 않는 형태

Hello, World를 출력하기 위해 컴퓨터가 수행하는 절차를 일일히 코드로 작성해줘여 한다.

흐름을 중요시 하는 방법. 흐름을 컨트롤 가능

명령형으로 작성하면 코드가 길어지기 때문에 직관적이지 않고, 실수할 확률이 높다

 

선언형 프로그래밍 (React)

무엇(What)을 중요시 여겨서 제어의 흐름보다는 원하는 목적을 중요시 여기는 형태

내가 UI를 선언하고 render 함수를 호출하면 React가 알아서 절차를 수행해 화면에 출력

즉, 화면에 어떻게 그려야할지는 React 내부에 잘 숨겨져 추상화되어 있다.

 

DOM을 직접 조작하여 작성하는 코드가 나쁘다는게 아니다.

카운터 예시와 같이 격리된 예제에서는 차라리 리액트와 같은 UI 라이브러리를 사용하지 않고 만드는게 더 빠르고 전체적인 번들 사이즈 측면에서도 더 효율적인 방법이다.

그렇지만 더 복잡한 UI 시스템에서는 관리하기가 기하급수적으로 어려워진다.

선언형 프로그래밍을 통해서 직관적인 코드 작성이 가능하다.

 

 

렌더링

렌더링이란?

리액트에서 렌더링이란, 컴포넌트가 현대 props와 state의 상태에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업을 의미한다.

  • UI : 음식
  • 컴포넌트 : 음식을 만드는 주방장
  • 리액트 : 웨이터
  1. 렌더링을 일으키는 것은 (triggering) - UI를 주문하고 주방으로 전달하는 것
  2. 렌더링한다는 것은 (rendering) - 주방에서 컴포넌트가 UI를 만들고 준비하는 것
  3. 렌더링 결과는 실제 DOM에 커밋한다는 것은 (commit = done) - 리액트가 준비된 UI를 손님 테이블에 올려놓는 것

 

리렌더링

첫 헨더링은 자동으로 일어난 것.

리액트 앱이 실행되면 리액트는 전체 컴포넌트를 렌더링하고 결과물을 DOM에 반영해 브라우저상에 보여준다.

첫 렌더링을 끝난 이후에 추가로 렌더링을 트리거 하려면 상태를 변경해주면 된다.

지금까지는 setState 함수를 다뤘지만, 몇 가지가 더 존재한다.

 

  1. 리렌더링은 음식점 손님이 첫 주문 이후에 갈등이 생겨 추가 음료를 주문하거나, 처음 받은 음식이 마음에 들지 않아 새로운 메뉴를 주문하는 것
  2. 새로운 UI주문(리렌더링)이 일어나면 리액트가 변경된 내용을 주방에 있는 요리사인 컴포넌트에 전달하고 컴포넌트는 새로운 변경된 주문을 토대로 새로운 요리(UI)를 만든다
  3. 새롭게 만들어진 요리(렌더링 결과)는 리액트에 의해 다시 손님 테이블에 올려진다. (DOM에 반영 - commit phase)

 

 

Pro Tips

console.log가 2번 찍혀서 불편하다면

index.js에서 <React.StrictMode> 두줄을 주석처리

 

js vs jsx

기능은 동일

협업자간 컴포넌트 파일이라는 것을 명시

 

js : class

jsx : className

 

github가 아닌 다른 방법으로 파일을 옮기거나 협업할 때

node_modules의 용량이 너무 커서 압축 및 해제할 때 시간 다 잡아먹는다.

해결방법은 node_modules를 삭제하고 공유하는 것

공유 받은 사람은 파일은 받은 뒤 다시 node_modules를 설치 (명령어 : npm i)

package.json의 dependencies를 기초로 해서 전부 설치하게 됨

 

 

하루를 마치며

React가 동작하는 방법에 대해서 자세히 살펴볼 수 있었다.

리액트는 화면을 렌더링할 때 State, Props의 변화에 따라 결정한다는 점.

단순 변화는 무시한다는 점.

어떤 방법으로 클라이언트에게 접근하는지 이해하면 로직을 구성할 때도 큰 도움이 될 것 같다.

직접 프로젝트를 만들어보여 익혀야겠다.

 

 

오늘의 한 줄
난 State를 바꿀테니, 넌 화면을 Rendering해

 

728x90