React는 UI를 구성하기 위한 컴포넌트 기반의 라이브러리입니다. 이번 포스팅에서는 클래스형 컴포넌트와 함수형 컴포넌트의 구조, props(properties)를 사용하는 방법, 그리고 props.children 활용법을 정리하였습니다.
1. 컴포넌트 구조
React 컴포넌트는 크게 클래스형 컴포넌트와 함수형 컴포넌트로 나눌 수 있습니다.
클래스형 컴포넌트
React.Component를 상속받아 작성하며, 반드시 render 메서드가 필요합니다.
import { Component } from 'react';
class MyApp extends Component { //리액트 컴포넌트를 상속받아 정의
render() { // 리액트 컴포넌트가 정의한 render 함수 재정의
return (
<>
<h1>클래스형 컴포넌트입니다.</h1>
</>
);
}
}
export default MyApp;함수형 컴포넌트
단순한 함수로 작성하며, return문에서 JSX를 반환합니다. 최근에는 함수형 컴포넌트와 Hook을 사용하는 방식이 더 많이 쓰입니다.
function MyApp() {
return (
<>
<h1>함수형 컴포넌트입니다.</h1>
</>
);
}
export default MyApp;함수 표현식이나 화살표 함수로도 작성 가능합니다.
const MyApp = () => (
<>
<h1>화살표 함수로 작성된 함수형 컴포넌트입니다.</h1>
</>
);
export default MyApp;2. 클래스형 컴포넌트와 함수형 컴포넌트 사용 예시
다음은 간단한 예제입니다.
클래스형 컴포넌트
import { Component } from "react";
class MyClassComp extends Component {
render() {
return (
<>
<h1>이름은 홍길동입니다.</h1>
<h2>나이는 23살입니다.</h2>
</>
);
}
}
export default MyClassComp;함수형 컴포넌트
function MyFuncComp() {
return (
<>
<h1>이름은 홍길동입니다.</h1>
<h2>나이는 23살입니다.</h2>
</>
);
}
export default MyFuncComp;App.js 파일에서 두 컴포넌트 사용
import MyClassComp from './component/MyClassComp';
import MyFuncComp from './component/MyFuncComp';
function App() {
return (
<>
<MyClassComp />
<hr />
<MyFuncComp />
</>
);
}
export default App;3. Props 사용법
props는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용하는 객체입니다.
- properties의 줄임말입니다.
- 컴포넌트의 속성을 설정할 때 사용합니다.
- props 값은 해당 컴포넌트를 사용하는 부모 컴포넌트에서 설정 = 부모 컴포넌트가 자식 컴포넌트에게 전달하는 값입니다.
- 자식 컴포넌트에서는 props 값을 읽기 전용으로 사용만 가능합니다.
부모 컴포넌트에서 데이터 전달
App.js에서 props로 데이터를 전달합니다.
import MyClassComp from './component/MyClassComp';
import MyFuncComp from './component/MyFuncComp';
function App() {
return (
<>
<MyClassComp name="홍길동" /> {/* MyClassComp에게 'name'이라는 prop을 전달 */}
<hr />
<MyFuncComp name="고길동" /> {/* MyFuncComp에게 'name'이라는 prop을 전달 */}
</>
);
}
export default App;자식 컴포넌트에서 prop 값 사용해봅니다.
import { Component } from "react";
class MyClassComp extends Component {
render() {
// 콘솔을 통해 this와 this.props를 확인
console.log(this); // 클래스형 컴포넌트에서 'this'는 컴포넌트 인스턴스를 가리킴
console.log(this.props); // 'props'는 부모로부터 전달된 속성들을 포함하는 객체
return (
<>
<h1>이름은 {this.props.name} 입니다.</h1> {/* 부모 컴포넌트로부터 전달받은 'name'을 출력 */}
<h2>나이는 23살 입니다.</h2>
</>
);
}
}
export default MyClassComp;결과값은 "이름은 홍길동 입니다."가 됩니다. ClassComp의 name 값이 홍길동이기 때문입니다.
클래스형 컴포넌트에서 Props 사용
클래스형 컴포넌트에서는 this.props로 접근합니다. 위의 예제와 동일한 방식입니다.
class MyClassComp extends Component {
render() {
return (
<>
<h1>이름은 {this.props.name}입니다.</h1>
</>
);
}
}
export default MyClassComp;함수형 컴포넌트에서 Props 사용
함수형 컴포넌트에서는 함수의 매개변수로 전달된 객체를 활용합니다.
function MyFuncComp(props) {
return (
<>
<h1>이름은 {props.name}입니다.</h1>
</>
);
}
export default MyFuncComp;객체 비구조화 할당을 사용하여 더 간결하게 작성할 수 있습니다.
function MyFuncComp(props) {
const { name } = props; // 객체 비구조화를 이용해서 props(객체)의 내용을 지역 변수로 할당
return (
<>
<h1>이름은 {name} 입니다.</h1>
</>
);
}
export default MyFuncComp;function MyFuncComp({ name }) { //매개변수를 객체 비구조화
return (
<>
<h1>이름은 {name}입니다.</h1>
</>
);
}
export default MyFuncComp;4. 여러 Props 전달하기
props로 여러 값을 전달하고 출력하는 예제입니다.
App.js에서 값 전달
<MyClassComp name="홍길동" age={23} nickname={"길동"} />
<MyFuncComp name="고길동" age={40} nickname="길동" />클래스형 컴포넌트에서 Props 출력
import { Component } from "react";
class MyClassComp extends Component {
render() {
return (
<>
<h1>이름은 {this.props.name} 입니다.</h1>
<h2>나이는 {this.props.age}살 입니다.</h2>
<h2>별명은 {this.props.nickname} 입니다.</h2>
</>
);
}
}
export default MyClassComp;class MyClassComp extends Component {
render() {
const { name, age, nickname } = this.props; // 객체 비구조화
return (
<>
<h1>이름은 {name}입니다.</h1>
<h2>나이는 {age}살입니다.</h2>
<h2>별명은 {nickname}입니다.</h2>
</>
);
}
}
export default MyClassComp;함수형 컴포넌트에서 Props 출력
function MyFuncComp({ name, age, nickname }) {
return (
<>
<h1>이름은 {name}입니다.</h1>
<h2>나이는 {age}살입니다.</h2>
<h2>별명은 {nickname}입니다.</h2>
</>
);
}
export default MyFuncComp;5. props.children 사용
props.children은 부모 컴포넌트와 자식 컴포넌트 사이에 전달되는 내용을 출력할 때 사용됩니다.
App.js에서 내용 전달
<MyClassComp name="홍길동" age={23} nickname="길동">
<i>어떤 내용</i>
</MyClassComp>
<MyFuncComp name="고길동" age={40} nickname="길동">
<u>또 어떤 내용</u>
</MyFuncComp>class MyClassComp extends Component {
render() {
const { name, age, nickname } = this.props;
return (
<>
<h1>이름은 {name} 입니다.</h1>
<h2>나이는 {age}살 입니다.</h2>
<h2>별명은 {nickname} 입니다.</h2>
<div>{this.props.children}</div>
</>
);
}
}class MyClassComp extends Component {
render() {
const { name, age, nickname, children } = this.props;
return (
<>
<h1>이름은 {name}입니다.</h1>
<h2>나이는 {age}살입니다.</h2>
<h2>별명은 {nickname}입니다.</h2>
<div>{children}</div>
</>
);
}
}
export default MyClassComp;function MyFuncComp({ name, age, nickname, children }) {
return (
<>
<h1>이름은 {name}입니다.</h1>
<h2>나이는 {age}살입니다.</h2>
<h2>별명은 {nickname}입니다.</h2>
<div>{children}</div>
</>
);
}
export default MyFuncComp;
React에서 클래스형 컴포넌트와 함수형 컴포넌트는 각각의 특징과 사용법이 있지만, 최근에는 더 간결하고 직관적인 함수형 컴포넌트가 주로 사용됩니다.
또한, props는 부모-자식 간 데이터 전달을 위한 중요한 도구로, 다양한 데이터를 효과적으로 관리할 수 있습니다.
props.children을 활용하면 컴포넌트에 내용을 동적으로 전달할 수도 있습니다.
React 컴포넌트의 기초를 이해하고 나면, 더욱 복잡한 UI도 쉽게 작성할 수 있습입니다
객체 배열 형태의 데이터를 출력
React에서 key prop을 설정하는 방법
React에서 map 함수나 반복문을 사용하여 리스트를 렌더링할 때, 각 항목에 고유한 key prop을 설정해야 합니다. 그렇지 않으면 React가 효율적으로 렌더링을 최적화하는 데 어려움을 겪을 수 있으며, 이로 인해 경고 메시지가 발생합니다. 오늘은 이 문제를 해결하는 방법에 대해 알아보겠습니다.
문제 상황
먼저, 아래와 같은 코드를 보겠습니다:
import MyClassComp from './component/MyClassComp';
import MyFuncComp from './component/MyFuncComp';
function App() {
const datas = [
{ name: "홍길동", age: 23, nickname: "호부호형을 원하는 자" },
{ name: "고길동", age: 40, nickname: "둘리를 싫어하는 자" },
{ name: "신길동", age: 63, nickname: "신길동 매운 짬뽕" }
];
return (
<>
{
datas.map(data => <MyClassComp name={data.name} age={data.age} nickname={data.nickname} />)
}
<hr />
{
datas.map(data => <MyFuncComp name={data.name} age={data.age} nickname={data.nickname} />)
}
</>
);
}
export default App;위 코드에서는 datas 배열의 데이터를 map 함수로 순회하여, 각 데이터를 MyClassComp와 MyFuncComp 컴포넌트에 전달하고 있습니다. 하지만, 이 코드에는 중요한 부분이 빠져 있습니다. 바로 key prop입니다.
key prop이 없으면 React는 각 항목을 구분할 수 없기 때문에, 콘솔에서 경고 메시지가 발생합니다. React는 각 항목에 고유한 key를 부여해야만, 어떤 항목이 변경되었는지, 삭제되었는지, 추가되었는지를 정확하게 추적할 수 있습니다.
key prop 설정하기
이 문제를 해결하려면, map 함수에서 각 항목에 고유한 key 값을 설정해야 합니다. map 함수는 두 번째 인자로 인덱스를 제공하는데, 이 인덱스를 key로 사용할 수 있습니다. 아래는 수정된 코드입니다:
import MyClassComp from './component/MyClassComp';
import MyFuncComp from './component/MyFuncComp';
function App() {
const datas = [
{ name: "홍길동", age: 23, nickname: "호부호형을 원하는 자" },
{ name: "고길동", age: 40, nickname: "둘리를 싫어하는 자" },
{ name: "신길동", age: 63, nickname: "신길동 매운 짬뽕" }
];
return (
<>
{
datas.map((data, index) => <MyClassComp key={index} name={data.name} age={data.age} nickname={data.nickname} />)
}
<hr />
{
datas.map((data, index) => <MyFuncComp key={index} name={data.name} age={data.age} nickname={data.nickname} />)
}
</>
);
}
export default App;key prop의 중요성
- key는 각 항목이 고유하게 식별될 수 있도록 돕습니다.
- React는 리스트에서 변경된 항목을 효율적으로 재렌더링하기 위해 key를 사용합니다. 이를 통해 불필요한 DOM 업데이트를 방지하고 성능을 최적화할 수 있습니다.
- key 값은 리스트 항목에 대해 유일한 값이어야 하며 가능하면 항목의 고유 ID를 사용하는 것이 좋습니다. 인덱스를 key로 사용하는 것은 예외적인 경우에만 사용하는 것이 좋습니다. 이유는 배열의 순서가 변경되거나 항목이 동적으로 추가되거나 삭제될 때 인덱스가 변경될 수 있기 때문입니다.
key에 인덱스 사용 시 주의할 점
- 인덱스를 key로 사용하는 것은 간단하지만, 데이터가 변경될 가능성이 있는 경우 성능에 영향을 미칠 수 있습니다.
- 데이터가 정렬되거나 항목이 추가되거나 삭제되는 경우, React는 인덱스를 key로 사용하여 변경된 항목을 올바르게 식별하지 못할 수 있습니다.
따라서 가능한 경우 고유한 ID를 사용하거나, 데이터의 내용을 기반으로 key를 설정하는 것이 더 안전하고 효율적입니다. 예를 들어, name이나 nickname을 key로 사용할 수 있습니다.
*생성형 AI 활용한 클라우드&보안 전문가 양성캠프 과정의 교육내용 정리 자료입니다.
'코딩' 카테고리의 다른 글
| Fastapi 협업시 venv 문제 관련 (0) | 2024.11.27 |
|---|---|
| [새싹 성동 2기] JSX - JavaScript의 확장 문법과 활용법 (0) | 2024.11.18 |