컴포넌트란?
리액트는 Component 기반의 구조라는 특징을 가지고 있다.
리액트는 모든 페이지가 컴포넌트로 구성되어 있고 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성될 수 있다.
이러한 컴포넌트들을 마치 레고 블록을 조립하듯 끼워 맞춰 새로운 컴포넌트를 만들 수 있다.
리액트에서 컴포넌트는 입력(props)을 받아 출력(Element) 하는 역할을 한다.
클래스형 컴포넌트와 함수형 컴포넌트 기본 구조
클래스형 컴포넌트
import { Component } from "react";
class MyApp extends Component {
render() {
return (
<> </>
);
}
}
export default MyApp;함수형 컴포넌트
function MyApp() {
return (
<> </>
);
}
export default MyApp;기타
함수 표현식으로 변경
const MyApp = function() {
return (
<> </>
);
}
export default MyApp;화살표 함수 변경
const MyApp = () => {
return (
<> </>
);
}
export default MyApp;props
props는 React 컴포넌트에서 사용하는 속성(properties)으로, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 매개체 역할을 한다.
React 컴포넌트는 이 props를 통해 동적으로 데이터를 받아 사용할 수 있습니다.
- properties의 줄임말
- 컴포넌트의 속성을 설정할 때 사용
- 항상 객체 형태
- props 값은 해당 컴포넌트를 사용하는 부모 컴포넌트(
App.js)에서 설정 - 컴포넌트 자신은 해당 props를 읽기 전용으로 사용만 가능
-> 부모 컴포넌트(App.js)가 전달해주는 값을 사용하도록만 해줌
클래스형 컴포넌트의 props
클래스형 컴포넌트는 import { Component } from "react"; 구문을 임포트 해준다.
이때 이 Component는 리액트가 컴포넌트가 되기 위한 것들을 미리 정의하고 있다.
그렇기 때문에 props 역시 정의되어 있어 따로 설정해주지 않아도 된다.
App.js ⇐ 부모 컴포넌트
import { Component } from "react";
import MyComponentClass from "./MyComponentClass";
import MyComponentFunction from "./MyComponentFunction";
class App extends Component {
render() {
return (
<>
<h1>클래스형 컴포넌트</h1>
<MyComponentClass name="홍길동" />
<hr />
<h1>함수형 컴포넌트</h1>
<MyComponentFunction name="고길동" />
</>
);
}
}
export default App;부모 컨포넌트에 정의한 props(여기서는 name)를 자식 컴포넌트에서 접근할 때 클래스형 컴포넌트는 this.props를 사용한다.
import { Component } from "react";
class MyComponentClass extends Component {
render() {
console.log(this);
console.log(this.props, typeof this.props);
return (
<>
<h1>이름은 {this.props.name}입니다.</h1>
<h2>나이는 23살입니다.</h2>
</>
);
}
}
export default MyComponentClass;✔️ 만약 이 props 이름을 바꾸면 어떻게 될까?
클래스형 컴포넌트는 정의된 props를 가져와 쓰는 것이기 때문에 이름을 바꾸면 동작하지 않는다.
함수형 컴포넌트의 props
함수형 컴포넌트의 경우 매개변수를 props로 받고있다.
props를 자식 컴포넌트에서 접근할땐 props로 접근하고 있다.
function MyComponentFunction(props) {
console.log(props);
return (
<>
<h1>이름은 {props.name}입니다.</h1>
<h2>나이는 23살입니다.</h2>
</>
);
}
export default MyComponentFunction; ✔️ 마찬가지로 props 이름을 바꾸면 어떻게 될까?
함수형 컴포넌트 같은경우는 props 이름을 바꿔도 정상으로 동작한다.
단지 props 라는 이름으로 매개변수를 받는 것 뿐이다.
하지만 관례적으로 부모가 전달하는 값을 props라고 이름 짓는다.
여러 값을 자식 컴포넌트로 전달할 때
App.js
import { Component } from "react";
import MyComponentClass from "./MyComponentClass";
import MyComponentFunction from "./MyComponentFunction";
class App extends Component {
render() {
return (
<>
<h1>클래스형 컴포넌트</h1>
<MyComponentClass name="신길동" age={23} nickname={"길동"} />
<hr />
<h1>함수형 컴포넌트</h1>
<MyComponentFunction name="고길동" age={40} nickname="길동" />
</>
);
}
}
export default App;클래스형 컴포넌트
1) 기본형
<>
<h1>이름은 {this.props.name}입니다.</h1>
<h2>나이는 {this.props.age}살입니다.</h2>
<h2>별명은 {this.props.nickname}입니다.</h2>
</>2) 객체 비구조화 이용
객체 비구조화: 키 이름을 기준으로 값을 가져옵니다.
const { name, age, nickname } = this.props;
return (
<>
<h1>이름은 {name}입니다.</h1>
<h2>나이는 {age}살입니다.</h2>
<h2>별명은 {nickname}입니다.</h2>
</>함수형 컴포넌트
1) 기본형
<>
<h1>이름은 {props.name}입니다.</h1>
<h2>나이는 {props.age}살입니다.</h2>
<h2>별명은 {props.nickname}입니다.</h2>
</>
2) 객체 비구조화 이용
const { name, age, nickname } = props;
return (
<>
<h1>이름은 {name}입니다.</h1>
<h2>나이는 {age}살입니다.</h2>
<h2>별명은 {nickname}입니다.</h2>
</>3) 매개변수를 객체 비구조화하도록 정의
❗️ 객체 비구조화 -> 항상 중괄호 써줘야한다
function MyComponentFunction({ name, age, nickname }) {
return (
<>
<h1>이름은 {name}입니다.</h1>
<h2>나이는 {age}살입니다.</h2>
<h2>별명은 {nickname}입니다.</h2>
</>
);
}
export default MyComponentFunction;props 값이 누락된 경우
-> props 변수 값이 누락된 경우 내용이 출력되지 않음
defaultProps를 설정해 props 변수가 누락된 경우 사용할 기본값을 설정
MyComponentClass.defaultProps = {
name: "아무개",
age: 0,
nickname: "없음"
};
export default MyComponentClass;
하지만 defaultProps 설정은 클래스형 컴포넌트에서만 지원하고 🔥 함수형 컴포넌트에서는 ES6 기본 매개변수와 중복되는 기능이기 때문에 제거될 예정이다.
떠라서 함수형 컴포넌트의 경우 함수의 디폴트 파라미터로 대체한다.
디폴트 파라미터
function MyComponentFunction({ name = "아무개", age = 0, nickname = "없음" }) {
return (
<>
<h1>이름은 {name}입니다.</h1>
<h2>나이는 {age}살입니다.</h2>
<h2>별명은 {nickname}입니다.</h2>
</>
);
}props.children이란?
props.children은 React 컴포넌트가 열리고 닫히는 태그 사이에 전달된 내용을 나타낸다. 즉, 컴포넌트 내부에 포함된 JSX 내용이 props.children으로 전달된다.
-> props.children을 사용하면, 부모 컴포넌트에서 자식 컴포넌트의 레이아웃에 특정 내용을 삽입하거나 조정할 수 있다.
부모 컨포넌트 (APP.js)에 내용(contents)를 추가하려고 할때
<MyComponentClass>
<i>어떤 내용</i>
</MyComponentClass>그냥 이런식으로만 해주면 내용이 포함되지 않는다.
그럼 어떻게 해줘야할까?
자식 컴포넌트에 내용을 출력하는 코드를 추가해줘야한다.
- 클래스형 컴포넌트:
<div>{this.props.children}</div> - 함수형 컴포넌트 :
<div>{children}</div>
객체 배열 형태의 데이터를 map 함수를 이용해서 출력하고 싶을 때
객체 배열 형태의 데이터를 map 함수를 이용해서 출력
import { Component } from "react";
import MyComponentClass from "./MyComponentClass";
import MyComponentFunction from "./MyComponentFunction";
const datas = [
{ name: "홍길동", age: 23, nickname: "호부호형을 원하는 자" },
{ name: "고길동", age: 43, nickname: "둘리가 싫은 자" },
{ name: "신길동", age: 50, nickname: "신길동 매운 짬뽕" }
];
class App extends Component {
render() {
return (
<>
<h1>클래스형 컴포넌트</h1>
{
datas.map(data =>
<MyComponentClass name={data.name} age={data.age} nickname={data.nickname}>
<i>어떤 내용</i>
</MyComponentClass>
)
}
<hr />
<h1>함수형 컴포넌트</h1>
{
datas.map(data =>
<MyComponentFunction name={data.name} age={data.age} nickname={data.nickname}>
<i>또 어떤 내용</i>
</MyComponentFunction>
)
}
</>
);
}
}
export default App;