React Component
주요개념
3-1. 새로운 JSX Transform을 사용할 수도, 아닐 수도 있다.
새로운 JSX Transform은 React 17부터 도입된 기능으로, JSX를 변환할 때 React 객체를 직접 import하지 않아도 자동으로 처리됩니다. 하지만 이전 방식에서는 React를 직접 import 해야 했습니다. 새로운 JSX Transform을 사용하려면 React 17 이상의 버전이 필요합니다.
React 17 이전
// React 17 이전: JSX 사용 시 React import 필요
import React from 'react';
const App: React.FC = () => {
return <h1>Hello, World!</h1>;
};
export default App;예시 코드 (React 17 이상, 새로운 JSX Transform)
// React 17 이상: React import 없이 JSX 사용 가능
const App: React.FC = () => {
return <h1>Hello, World!</h1>;
};
export default App;3-2. Strict Mode를 사용하면 사전에 버그 가능성을 발견할 수 있다
React의 Strict Mode는 개발 모드에서 활성화되며, 잠재적인 버그를 발견하고 성능 최적화를 도와줍니다. Strict Mode는 실제 애플리케이션에는 영향을 주지 않으며, 컴포넌트가 안전하게 렌더링될 수 있도록 합니다.
import React from 'react';
import ReactDOM from 'react-dom';
const App: React.FC = () => {
return <h1>Hello, World!</h1>;
};
// Strict Mode 사용
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);3-3. 순수 함수란? 동일 입력 - 동일 출력되는 함수를 말한다. (예측 가능성)
순수 함수는 동일한 입력에 대해 항상 동일한 출력을 반환하며, 외부 상태를 변경하지 않는 함수입니다. 이는 예측 가능성을 높이고, 디버깅과 테스트를 쉽게 만듭니다.
// 순수 함수
const add = (a: number, b: number): number => a + b;
// 동일한 입력에 대해 항상 동일한 출력 반환
console.log(add(2, 3)); // 53-4. React 컴포넌트는 순수하다고 가정한다. 이 규칙을 어기는 지 Strict Mode로 검사한다
React 컴포넌트는 순수 함수처럼 작동해야 하며, 상태나 props를 외부에서 변경하거나, 부수 효과를 일으켜서는 안 됩니다. React의 Strict Mode는 컴포넌트가 이 규칙을 어기고 있는지 검사합니다.
3-5. 순수 함수를 검사하려면 함수를 2번 실행한다. 즉, Strict Mode에서 컴포넌트는 2회 실행된다
React의 Strict Mode에서는 컴포넌트를 두 번 실행하여 사이드 이펙트나 불안정한 동작을 탐지합니다. 이를 통해 개발자가 잘못된 방식으로 컴포넌트를 작성했는지 확인할 수 있습니다.
3-6. Strict Mode는 개발 모드에서만 작동하며, 배포된 경우 영향을 주지 않는다
Strict Mode는 개발 모드에서만 활성화되며, 프로덕션 빌드에서는 아무런 영향을 미치지 않습니다. 이는 개발 중에만 버그나 잠재적인 문제를 조기에 발견할 수 있도록 돕기 위한 기능입니다.
3-7. 부수 효과란? React 렌더링 프로세스와 관련 없는 것들을 말한다
부수 효과(Side Effects)는 React 컴포넌트 렌더링과는 별개로 발생하는 작업들을 말합니다. 예를 들어, 네트워크 요청, 타이머 설정, DOM 조작 등이 부수 효과에 해당합니다.
import React, { useEffect } from 'react';
const Example: React.FC = () => {
useEffect(() => {
// 네트워크 요청 등 부수 효과
fetch('https://api.example.com')
.then(response => response.json())
.then(data => console.log(data));
}, []); // 빈 배열로 컴포넌트 마운트 시 1회 실행
return <h1>Data loading...</h1>;
};
export default Example;3-8. 리스트 렌더링은 데이터를 기반으로 반복 처리하여 목록을 렌더링 하는 것을 말한다
리스트 렌더링은 배열이나 객체 데이터를 기반으로 여러 항목을 화면에 표시하는 방법입니다. React에서는 map() 메서드를 사용해 배열을 반복 처리하여 UI를 생성합니다.
import React from 'react';
const ItemList: React.FC = () => {
const items = ['Apple', 'Banana', 'Cherry'];
return (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
};
export default ItemList;3-9. 리스트 렌더링 시 형제는 고유한 식별자(ID)를 key 속성으로 가져야 한다
React에서 리스트 항목을 렌더링할 때, 각 항목은 고유한 key 속성을 가져야 합니다. 이는 React가 어떤 항목이 변경되었는지 효율적으로 추적할 수 있도록 도와줍니다.
import React from 'react';
const ItemList: React.FC = () => {
const items = ['Apple', 'Banana', 'Cherry'];
return (
<ul>
{items.map((item, index) => (
<li key={item}>{item}</li> // 고유한 key값 사용
))}
</ul>
);
};
export default ItemList;3-10. key 속성을 설정해야 효과적으로 빠르고 정확하게 React가 렌더링 한다
key 속성은 리스트 항목이 변할 때 React가 어떤 항목을 변경해야 할지 효율적으로 판단하도록 도와줍니다. key는 고유해야 하며, 배열의 인덱스를 사용하는 것은 피해야 합니다.
3-11. 화면을 업데이트 할 때는 상태를 설정하고 업데이트 해야 한다
React에서는 상태를 업데이트하여 화면을 다시 렌더링합니다. 상태가 변경되면 React가 컴포넌트를 다시 렌더링하여 최신 상태를 화면에 반영합니다.
3-12. React 컴포넌트(함수)의 상태는 React.useState API(함수)를 사용한다
React에서 컴포넌트의 상태를 관리하기 위해 useState Hook을 사용합니다. 이 훅은 상태 변수와 상태를 업데이트하는 함수의 튜플을 반환합니다.
import React, { useState } from 'react';
const Counter: React.FC = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
export default Counter;14. useState() 함수 실행 결과 튜플(tuple)이 반환되는데 [state, updater] 구조이다
useState 훅은 현재 상태 값과 상태를 업데이트하는 함수를 포함하는 배열(튜플)을 반환합니다. 이를 사용하여 상태를 관리합니다.
15. 상태 업데이트 함수가 실행되면 React로 하여금 컴포넌트를 다시 렌더링 하라고 지시한다
상태가 변경되면 상태 업데이트 함수가 실행되어 React에게 컴포넌트를 다시 렌더링하라고 지시합니다. React는 상태를 반영하여 UI를 업데이트합니다.
16. React가 컴포넌트를 다시 렌더링하면 컴포넌트(함수)가 다시 실행되고 화면을 변경한다
상태나 props가 변경되면 React는 해당 컴포넌트를 다시 실행하여 화면을 최신 상태로 업데이트합니다. 이 과정에서 컴포넌트는 다시 렌더링되고, UI가 변경됩니다.
