props
:컴포넌트 속성을 설정할때 사용하는 요소입니다.
props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있습니다.
JSX 내부에서 props 렌더링
import React from "react";
const MyComponent = (props) => {
return <div>안녕하세요 제 이름은 {props.name}입니다.</div>;
};
MyComponent.defaultProps = {
name: "기본 이름",
};
export default MyComponent;props 값 지정하기
import React from "react";
import MyComponent from "./MyComponent";
const App = () => {
return <MyComponent name="김지원"/>;
};
export default App;태그 사이의 내용을 보여주는 children
import React from "react";
import MyComponent from "./MyComponent";
const App = () => {
return <MyComponent>리액트</MyComponent>;
};
export default App;MyComponent태그 사이에 작성한 문자열을 MyComponent 내부에서 보여 주려면 props.children 값을 보여 주어야 합니다.
import React from "react";
const MyComponent = (props) => {
return (
<div>
안녕하세요 제 이름은 {props.name}입니다.
<br /> children 값은 {props.children} 입니다.
</div>
);
};
MyComponent.defaultProps = {
name: "기본 이름",
};
export default MyComponent;결과:
안녕하세요, 제이름은 기본이름 입니다.
children 값은 리액트 입니다.
비구조화 할당 문법을 통해 props 내부 값 추출하기
위에서 props 값을 조회할 때마다 props.name props.children과 같이 props.이라는 키워드를 앞에 붙여 주고 있습니다.
좀 더 편하게 하기 위해 비구조화 할당 문법을 사용하여 내부 값을 바로 추출하는 방법을 알아보겠습니다.
import React from "react";
const MyComponent = (props) => {
const {name, children} = props;
return (
<div>
안녕하세요 제 이름은 {name}입니다.
<br /> children 값은 {children} 입니다.
</div>
);
};
MyComponent.defaultProps = {
name: "기본 이름",
};
export default MyComponent;함수의 파라미터 부분에서도 사용할 수 있습니다.
함수의 파라미터가 객체라면 그 값을 바로 비구조화해서 사용하는 것이죠!
import React from "react";
const MyComponent = ({ name, children }) => {
return (
<div>
안녕하세요 제 이름은 {name}입니다.
<br /> children 값은 {children} 입니다.
</div>
);
};
MyComponent.defaultProps = {
name: "기본 이름",
};
export default MyComponent;propsTypes를 통한 props 검증
컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때는 propTypes를 사용합니다.
propTypes를 사용하려면 코드 상단에 import 구문을 사용하여 불러와야 합니다.
import PropTypes from 'prop-types';
MyComponent.propTypes = {
name: PropTypes.string,
};name 값을 문자열이 아닌 숫자로 전달하면 콘솔에 경고 메세지 출력 됩니다.
isRequired를 사용하여 필수 propTypes 설정
propTypes를 지정하지 않았을 때 경고 메세지를 띄워 주는 작업을 해봅시다.
propTypes를 지정할때 뒤에 isRequired를 붙여 주면 됩니다.
MyComponent.propTypes = {
name: PropTypes.string,
favoriteNumber: PropTypes.number.isRequired,
};state
: 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다.
props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있습니다.
props를 바꾸려면 부모 컴포넌트에서 바꾸어 주어야 합니다.
함수형 컴포넌트에서 useState 사용하기
import React, { useState } from "react";
const Say = () => {
const [message, setMessage] = useState("");
const onClickEnter = () => setMessage("안녕하세요!");
const onClickLeave = () => setMessage("안녕히 가세요!");
return (
<div>
<button onClick={onClickEnter}>입장</button>
<button onClick={onClickLeave}>퇴장</button>
<h1>{message}</h1>
</div>
);
};
export default Say;useState 함수의 인자에는 상태의 초깃값을 넣어 줍니다.
함수를 호출하면 배열이 반환되는데요.
배열의 첫 번째 원소는 현재 상태이고, 두 번째 원소는 상태를 바꾸어 주는 함수입니다.
state를 사용할 때 주의사항
state 값을 바꾸어야 할 때는 useState를 통해 전달받은 세터 함수를사용해야 합니다.
잘못된 코드
const [object, setObject] = useState({a:1,b:1});
object.b=2Q. 배열이나 객체를 업데이트해야 할 때는 어떻게 해야 할까요?
A. 배열이나 객체 사본을 만들고 그 사본에 값을 업데이트한 후, 그 사본의 상태를 setState 또는 세터 함수를 통해 업데이트 합니다.
- 사본을 만들어서 업데이트하는 예시
//객체 다루기
const object ={ a:1, b:2, c:3 };
const nextObject = {...object, b:2};//사본을 만들어서 b 값만 덮어 쓰기
//배열 다루기
const array = [
{ id:1, value: true },
{ id:2, value: true },
{ id:3, value: false }
];
let nextArray = array.concat({id:4});//새 항목 추가
nextArray.filter(item => item.id !==2);//id가 2인 항목 제거
nextArray.map(item => (item.id === 1 ? {...item,value:false}:item));
//id가 1인 항목의 value를 false로 설정