React
구성 요소
구성 요소는 독립적이고 재사용 가능한 코드 비트다.
이는 JavaScript 함수와 동일한 목적을 수행하지만 독립적으로 작동하고 HTML을 반환한다.
구성 요소는 클래스 구성 요소와 함수 구성 요소의 두 가지 유형으로 제공된다.
이 튜토리얼에서는 함수 구성 요소에 중점을 둘 것이다.
⭐ 이전 React 코드 베이스에서는 Class 구성 요소가 주로 사용되는 것을 볼 수 있다. 이제 React 16.8에 추가된 Hooks와 함께 Function 구성 요소를 사용하는 것이 좋다. 참조용으로 클래스 구성 요소에 대한 선택적 섹션이 있다.
첫 번째 구성 요소 만들기
React 컴포넌트를 생성할 때 컴포넌트 이름은 반드시 대문자로 시작해야 한다.
클래스 구성 요소
클래스 구성 요소에는 extends React.Component문이 포함되어야 한다.
이 명령문은 React.Component에 대한 상속을 생성하고 구성 요소에 React.Component의 기능에 대한 액세스를 제공한다.
구성 요소에는 render()메서드도 필요하며 이 메서드는 HTML을 반환한다.
예제
Car 라는 클래스 구성 요소를 만든다.
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
기능 구성 요소
다음은 위와 동일한 예이지만 대신 Function 구성 요소를 사용하여 생성되었다.
Function 구성 요소도 HTML을 반환하고 Class 구성 요소와 거의 동일한 방식으로 동작하지만 Function 구성 요소는 훨씬 적은 코드를 사용하여 작성할 수 있고 이해하기 쉬우며 이 자습서에서는 선호된다.
예제
Car 라는 기능 구성 요소를 만든다.
function Car() {
return <h2>Hi, I am a Car!</h2>;
}
구성요소 렌더링
이제 React 애플리케이션에는 <h2> 요소를 반환하는 Car라는 구성 요소가 있다.
애플리케이션에서 이 구성요소를 사용하려면 일반 HTML과 유사한 구문을 사용한다. <Car />
예제
“루트” 요소에 Car 구성 요소를 표시한다.
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
Props
구성 요소는 속성을 나타내는 Props으로 전달할 수 있다.
Props은 함수 인수와 같고 속성으로 구성 요소에 보낸다.
예제
특성을 사용하여 색상을 Car 구성 요소에 전달하고 render() 함수에 사용한다.
function Car(props) {
return <h2>I am a {props.color} Car!</h2>;
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car color="red"/>);
구성요소 내 구성요소
우리는 다른 구성 요소 내부의 구성 요소를 참조할 수 있다.
예제
Garage 구성 요소 내부에 있는 Car 구성 요소를 사용한다.
function Car() {
return <h2>I am a Car!</h2>;
}
function Garage() {
return (
<>
<h1>Who lives in my Garage?</h1>
<Car />
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);
파일의 구성요소
React는 코드를 재사용하는 것이 전부이며 구성 요소를 별도의 파일로 분할하는 것이 좋다.
그러기 위해서는 .js 파일 확장자를 가진 새 파일을 만들고 그 안에 코드를 넣는다.
⭐ 파일 이름은 대문자로 시작해야 한다.
예제
새 파일 이름은 “Car.js”다.
function Car() {
return <h2>Hi, I am a Car!</h2>;
}
export default Car;
Car 구성 요소를 사용하려면 응용 프로그램에서 파일을 가져와야 한다.
예제
이제 응용 프로그램에서 “Car.js” 파일을 가져오면 여기서 만든 것처럼 Car 구성 요소를 사용할 수 있다.
import React from 'react';
import ReactDOM from 'react-dom/client';
import Car from './Car.js';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
참고
