이번주에 한일

REACT 개별과제 LV5까지가 적용된 TODOLIST를 개발하고 이에 관련된 리액트쿼리 리덕스툴킷 AXIOS미들웨어를 실전에서 사용해보며 숙달했다.

이번주의 핵심

State

리액트(React)에서 state는 컴포넌트의 생명 주기 동안 변경될 수 있는 데이터를 의미합니다. 간단히 말해, state는 컴포넌트의 상태를 나타내며, 그 변화에 따라 컴포넌트의 렌더링 결과가 달라집니다.

주요 특징:

1. Local State: 각각의 컴포넌트는 자신만의 state를 가질 수 있으며, 이를 'local' 또는 'internal' state라고 합니다. 이 state는 해당 컴포넌트 내에서만 직접적으로 변경하거나 접근할 수 있습니다.

2. Changes Trigger Re-renders: state가 변경되면, 리액트는 그 컴포넌트를 재렌더링합니다. 이렇게 해서 UI는 항상 최신의 state를 반영하게 됩니다.

3. State Updates are Asynchronous: 리액트의 state 업데이트는 비동기적입니다. 즉, setState 함수를 호출했을 때 state 변경이 즉시 발생하지 않을 수 있습니다. 이는 성능 최적화를 위한 리액트의 설계 방식입니다.

4. State is Immutable: state는 불변(immutable)해야 합니다. 즉, state를 직접 변경해서는 안 되며, 대신 setState 함수를 사용해야 합니다.

사용법:

리액트 클래스 컴포넌트에서는 this.state 객체를 통해 state를 사용하며, this.setState 메소드를 통해 state를 업데이트합니다. 반면에, 함수형 컴포넌트에서는 useState라는 훅을 통해 state를 사용하고 관리합니다. 이 useState 훅은 초기 state 값을 인자로 받아, state를 위한 변수와 그 변수를 업데이트하기 위한 함수를 반환합니다.

리액트의 state 관리는 컴포넌트의 상태를 유연하게 관리할 수 있도록 하여, 동적인 UI를 만드는 데 큰 역할을 합니다.

props

리액트(React)에서 props(properties의 약자)는 컴포넌트 간에 데이터를 전달하는 방법을 제공합니다.

특히, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 주로 사용되며, 이를 통해 컴포넌트를 재사용하고 유지보수하기 쉽게 만드는 데 도움이 됩니다.

주요 특징:

1. Read-Only: Props는 read-only 즉, 읽기 전용입니다. 즉, 컴포넌트는 자신에게 전달된 props를 직접 변경할 수 없습니다. 이는 리액트의 '단방향 데이터 흐름' 원칙을 반영한 것으로, 이 원칙은 데이터가 부모 컴포넌트에서 자식 컴포넌트로만 흐른다는 것을 의미합니다.

2. Default Props: 컴포넌트는 defaultProps를 통해 props의 기본값을 설정할 수 있습니다. 이는 부모 컴포넌트가 해당 prop 값을 제공하지 않았을 경우 사용됩니다.

3. Prop-Types: Prop-types는 컴포넌트가 받아야 하는 props의 유형을 검증하는 데 사용됩니다. 이를 통해 개발자는 잘못된 유형의 prop이 전달될 때 오류 메시지를 출력할 수 있어 디버깅에 도움이 됩니다.

사용법:

Props는 컴포넌트에 전달될 때 JSX 속성처럼 보입니다. 예를 들어, <MyComponent someProp={myData} />에서 someProp은 prop의 이름이며, myData는 전달되는 데이터입니다.

클래스 컴포넌트에서는 this.props를 통해 props에 접근할 수 있습니다. 함수형 컴포넌트에서는 첫 번째 매개변수로 props를 받아서 사용할 수 있습니다.

리액트에서 props는 컴포넌트 간 데이터를 전달하고, 컴포넌트를 재사용 가능하고 유지보수가 쉽게 만드는 중요한 역할을 합니다.

리액트 리렌더링

리액트에서 렌더링은 컴포넌트의 출력을 결정하는 과정입니다. 컴포넌트의 render 메소드가 호출되어서 컴포넌트의 현재 상태(state)와 속성(props)을 기반으로 UI를 구성합니다. 이 때 render 메소드는 JSX를 반환하며, 이것이 실제 브라우저에서 보여지는 것입니다.

재렌더링(re-rendering)은 컴포넌트가 다시 렌더링되는 것을 의미합니다. 리액트에서는 컴포넌트의 state나 props가 변경될 때마다 컴포넌트를 재렌더링합니다. 이를 통해 UI는 항상 최신의 state와 props를 반영하게 됩니다.

그러나 이렇게 모든 변경에 대해 컴포넌트를 재렌더링하는 것은 성능에 부담이 될 수 있습니다. 그래서 리액트는 렌더링 성능을 최적화하기 위해 가상 DOM(Virtual DOM)과 diffing 알고리즘을 사용합니다.

• 가상 DOM: 가상 DOM은 실제 DOM의 가벼운 복사본으로 생각할 수 있습니다. 변경이 일어날 때마다 리액트는 가상 DOM을 먼저 업데이트하고, 이를 실제 DOM와 비교합니다.

• Diffing 알고리즘: 이 알고리즘을 통해 리액트는 가상 DOM과 실제 DOM 간의 차이점을 파악합니다. 이렇게 찾아낸 차이점만 실제 DOM에 반영함으로써, DOM 업데이트를 효율적으로 수행하고 성능을 최적화합니다.

리액트의 이러한 렌더링과 재렌더링 방식은 사용자 인터랙션, 네트워크 응답 등 다양한 상황에 빠르게 반응하는 동적인 UI를 만드는 데 중요한 역할을 합니다.

이번주에 느낀점

리액트의 문법을 다루는데에는 제법 익숙해 졌다고 생각합니다.

그러나 그보다 더 중요한 css가 정말 형편없다는걸 직시하게 되는 한주였기 때문에 이에 대한 기본을 철저하게 갈고닦을 생각입니다.