Portfolio

React의 장점은 무엇이라고 생각하나요.

빠른 업데이트와 렌더링 속도

React는 DOM을 직접 수정하는 것이 아니라 업데이트 해야할 최소한의 부분만 찾아서 변경한다.

Component_Based : 재사용성(Reusability)

리액트는 모든 페이지가 컴포넌트로 구성되어져 있고 하나의 컴포넌트는 다른 여러개의 컴포넌트로 구성되어질 수 있다.

마치 레고 블록을 조립하듯 컴포넌트들을 조립해서 개발할 수 있다는 것이다.

따라서 React로 개발을 하다보면 레고 블록을 조립하는 것처럼 컴포넌트들을 조합해서 웹사이트들을 개발하게 되어

코드의 재사용성이 증가한다.

이는 곧 개발기간 단축과 유지 보수의 용이로 이어지게된다.

활발한 지식공유 및 커뮤니티

모르는 것을 바로 찾아볼 수 있다는 것은 개발자라면 엄청난 장점이라는 것은 뭐. 두말할 필요가 없을 것이다.

React에서 Function Component를 사용할 때 라이프사이클에 대해 설명해주세요.

분류	클래스형 컴포넌트	함수형 컴포넌트
Mounting	constructor()	함수형 컴포넌트 내부
Mounting	render()	return()
Mounting	ComponenDidMount()	useEffect()
Updating	componentDidUpdate()	useEffect()
UnMounting	componentWillUnmount()	useEffect()
ㅤ	ㅤ	ㅤ

1. 함수형 컴포넌트가 호출이 됩니다.

2. 함수형 컴포넌트의 내부에서 실행합니다.

3. return()으로 화면에 렌더링 합니다.

4. useEffect()가 실행됩니다.

💡 [ 조건부 수행 ]

1. 변경 혹은 컴포넌트의 소멸이 발생 시 useEffect() 실행

1. 렌더링(Rendering) 이란?

React 내에서는 컴포넌트 렌더링이라고도 하며, 컴포넌트 내에 엘리먼트 요소들(HTML, React 사용자 정의 태그)을 화면상에 그리는 동작을 의미한다.

2. 리 렌더링(re-Rendering) 이란?

컴포넌트 내에 엘리먼트 요소들을 코드를 기반으로 화면의 그리는 작업을 다시 수행하는 것을 의미한다.

mount, update, unmount

Virtual DOM이란? Virtual DOM을 사용하는 이유는 무엇인가요?⭐⭐

React에서 사용하는 가상 DOM도 실제 DOM 내용에 기반하여 만들어진다. 그런데 왜 Virtual DOM을 사용해야 할까? 왜냐하면 실제 DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있어 실제 DOM을 조작하는 작업이 무겁기 때문이다. 그래서React에서는 실제 DOM의 변경 사항을 빠르게 파악하고 반영하기 위해서 내부적으로 가상 DOM을 만들어서 관리한다. 쉽게 말해서, Virtual DOM은 DOM의 요약본이라고 볼 수 있다. Virtual DOM을 사용하면 실제 DOM에 접근하며 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다. DOM의 상태를 메모리에 저장하고, 변경 전과 변경 후의 상태를 비교 한뒤 최소한의 내용만 반영하여 성능 향상을 이끌어낸다. DOM의 상태를 메모리 위에 계속 올려두고, DOM에 변경 있을 경우 해당 변경 사항만 반영하는 것이다.

props와 state에 대해 설명해주세요. ⭐⭐

props는 받은 데이터 이거나 생성된 데이터, 즉 데이터의 기원이 자기 자신이 아닌 것이고, state는 자기자신의 컴포넌트에서 만들어낸 데이터 입니다. state는 현재 컴포넌트에서 생성, 변할 수 있는 데이터 입니다. state는 오직 state가 생성된 컴포넌트 내에서만 변경이 가능합니다.

class형 컴포넌트를 사용할 때는 this.props로 props에 접근하여 props를 수정할 수 있었다.

Fiber가 뭔가요?

React Fiber 얕게 알아보기

리액트 화이바....? 어디선가 계속 언급되던 React Fiber를 살펴봐야겠다고 마음을 먹었다. react-fiber-architecture 문서를 읽다가 이해도 잘 안되고 금방 까먹을 것 같아 일단 대충 번역했고, 이외에 다른 문서 등에서 살을 붙였다.

https://velog.io/@jangws/React-Fiber

Fiber는 React v16에서 리액트의 핵심 알고리즘을 재구성한 새 재조정(Reconciliation) 엔진이다. React Fiber의 목표는 애니메이션, 레이아웃, 제스처, 중단 또는 재사용 기능과 같은 영역에 대한 적합성을 높이고 다양한 유형의 업데이트에 우선 순위를 지정하는 것이다.

i. 중단 가능한 작업을 덩어리로 나누기

ii. 진행 중인 작업의 우선순위를 지정하고, 리베이스하고 재사용

iii. 리액트의 레이아웃을 지원하기 위해 부모와 자식 간에 yield back and forth

iv. render()로부터 다수 엘리먼트들을 반환

v. 에러 바운더리에 대한 더 나은 지원

state를 직접 변경하지 않고 setState를 사용하는 이유에 대해서 설명하세요.

만약 setState메소드를 사용하지 않고 state property에 접근해서 값을 변경하는 경우 그 값이 실제 HTML상으로는 업데이트 되지 않게 됩니다. 앞서 리액트에서는 효율적으로 HTML이 업데이트 되어야 할 부분만을 감지해서 업데이트 한다고 했었습니다. 그렇기 위해서 리액트 개발팀에서 특정한 작업이 이루어 졌을 때에만 HTML이 업데이트 되도록 만든 규칙 중 하나가 바로 setState실행 입니다. 다른 방법으로 state를 변경하게 되면 변경된 값을 HTML에서는 볼 수가 없게 됩니다.

setState는 비동기적으로 동작하기 때문에 state가 직접 수정되어 여러번 상태를 업데이트 하는 경우, 이전 업데이트 내용이 다음 업데이트 내용에 덮어 쓰여질 수가 있어 예상치 못한 곳에서 버그가 발생 할 수 있습니다.(데이터 불변성)

함수형 컴포넌트를 사용하는 이유에 대해서 설명해주세요.

1. 클래스형 컴포넌트간에 재사용 가능한 로직을 공유하려면 render props, 고차원 컴포넌트와 같은 패턴을 사용해야하지만 이러한 방법은 컴포넌트의 재구성을 강요하고 디버깅 시 코드 추적에 어려움이 있습니다. 그런데 React Hook에서는 컴포넌트로부터 상태 관련 로직을 추상화할 수 있어서 독립적으로 재사용이 가능해 집니다.

2. 클래스형 컴포넌트의 lifecycle method 를 사용할때 componentDidMount, componentDidUpdate, componentWillUnmount 함수가 기능별로 세분화 되있어서 코드가 중복되는 경우가 있었습니다. 이 때문에 상태 관리 라이브러리를 함께 결합해서 사용하는 경우가 많았는데 React Hook에서는 useEffect를 여러개 선언할 수 있으며 두번째 인자인 의존성 배열에 원하는 state를 넣어서 연관된 동작을 하는 기능 단위로 묶어서 관리할 수 있습니다.

3. this는 자신이 속한 객체 또는 인스턴스를 가리키는 자기 참조 변수인데, 클래스형 컴포넌트에서는 this를 사용해야 클래스에 관련된 함수나 props, state 등에 접근할 수 있어서 불필요하게 코드가 길어지는 단점도 존재합니다. 또한, 기본적인 JS 문법 사항을 알아야 다룰 수 있게 됩니다.클래스 컴포넌트는 위와 같은 이유로 불편함이 많아서 큰 진입장벽으로 작용하였고 이를 해결하기 위해 React Hook이 등장하게 됐습니다.

React에서 controlled vs. uncontrolled component가 뭔지 설명해주세요.

HTML에서 <input>, <textarea>, <select>와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트됩니다.

우리는 React state를 “신뢰 가능한 단일 출처 (single source of truth)“로 만들어 두 요소를 결합할 수 있습니다. 그러면 폼을 렌더링하는 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어합니다. 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 “제어 컴포넌트 (controlled component)“라고 합니다. 제어 컴포넌트에서 폼 데이터는 React 컴포넌트에서 다루어집니다.비제어 컴포넌트는 DOM 자체에서 폼 데이터가 다루어집니다.모든 state 업데이트에 대한 이벤트 핸들러를 작성하는 대신 비제어 컴포넌트를 만들려면 ref를 사용하여 DOM에서 폼 값을 가져올 수 있습니다.

제어 컴포넌트(Controlled Component)

입력 값이 생길 때마다 상태를 새롭게 갱신하여 항상 최신값으로 유지한다. 데이터와 UI에서 입력한 값이 항상 동기화되고 있음을 알 수 있다.

비제어 컴포넌트(Uncontrolled Component)

form의 button을 클릭하기 전까진 값을 알 수 없다. button을 클릭해야 비로소 값을 가져올 수 있다.

제어 컴포넌트와 비제어 컴포넌트는 어떤 경우에 사용하는 것이 바람직할까

제어 컴포넌트(Controlled Component)는 UI의 입력한 데이터 상태(사용자에게 보여지는 화면)와 저장한 데이터의 상태가 항상 일치한다. 이 말은 즉슨, 사용자가 입력할 때마다 재렌더링되고 있다는 것이다.

그래서 실시간으로 값이 필요할 때는 제어 컴포넌트(Controlled Component)를 사용하고,

불필요한 재렌더링을 줄이고 제출 시에만 값이 필요할 때는 비제어 컴포넌트(UnControlled Component)를 사용하는 것이 좋다.

React에서 DOM을 어떻게 렌더링하고 state 기반 UI 업데이트를 어떻게 하나요?

리액트의 렌더링은 어떻게 일어나는가?

리액트에서 메모이제이션을 언제 해야하는가 고민 하다가 여기까지 왔다

https://yceffort.kr/2022/04/deep-dive-in-react-rendering

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

렌더링이 일어나는 동안, 리액트는 컴포넌트의 루트에서 시작하여 아래쪽으로 쭉 훑어 보면서, 업데이트가 필요하다고 플래그가 지정되어 있는 모든 컴포넌트를 찾는다.만약 플래그가 지정되어 있는 컴포넌트를 만난다면, 클래스 컴포넌트의 경우 classComponentInstance.render() 를, 함수형 컴포넌트의 경우 FunctionComponent()를 호출하고, 렌더링된 결과를 저장한다.

컴포넌트의 렌더링 결과물은 일반적으로 JSX 문법으로 구성되어 있으며, 이는 js가 컴파일되고 배포 준비가 되는순간에 React.createElement()를 호출하여 변환된다. createElement는 UI 구조를 설명하는 일반적인 JS 객체인 React Element를 리턴한다.

전체 컴포넌트에서 이러한 렌더링 결과물을 수집하고, 리액트는 새로운 오브젝트 트리 (가상돔이라고 알려져있는)와 비교하며, 실제 DOM을 의도한 출력처럼 보이게 적용해야 하는 모든 변경 사항을 수집한다. 이렇게 비교하고 계산하는 과정을 리액트에서는 reconciliation이라고 한다.

Render phase:컴포넌트를 렌더링하고 변경사항을 계산하는 모든 작업

Commit phase: 돔에 변경사항을 적용하는 과정

React 재렌더링 조건

state 변경이 있을 때. setState함수는 비동기로 처리된다. 해당 코드가 들어있는 블럭이 모두 읽히고 나서 실행된다.

새로운 props가 들어올 때. 부모 컴포넌트로부터 새 props가 들어오면 자식 컴포넌트는 재 랜더링 된다.

기존 props가 업데이트 됐을 때. 부모 컴포넌트로부터 받은 props가 변경되면 props 값을 받은 자식 컴포넌트도 재렌더링 된다.

부모 컴포넌트가 재렌더링 될 때. 부모 컴포넌트가 업데이트 되어 재렌더링 되면 자식 컴포넌트도 재렌더링 된다.

[React] 리액트 재렌더링 조건 & 렌더링 성능 최적화 방법

리액트가 언제 재렌더링이 되며, 불필요한 렌더링을 막고 성능을 최적화하기 위해서는 어떻게 해야할 지에 대해 알아보자. 목차 리액트 재렌더링 조건 렌더링 성능 최적화 방법 리액트 재렌더링 조건 1. state(상태) 변경이 있을 때 리액트는 state 변경이 감지되면 재렌더링 한다. 2. 새로운 props가 들어올 때 부모 컴포넌트로부터 새 props가 들어오면 자식 컴포넌트는 재렌더링 된다.

https://fromnowwon.tistory.com/103