props
- props 는 properties의 줄임말
- 속성 값을 컴포넌트로 넘겨주는 기능
- App.js에서 Hello.js 컴포넌트로 불러옴.
import './App.css';
import Hello from './Hello.js';
function App() {
return (
<div>
<Hello name="react"/>
</div>
);
};
export default App;위의 코드처럼 Hello.js. 컴포넌트에 props로 name이란 이름에 react라는 문자열을 전달해 줌.
import React from "react";
function Hello(props){
return(
<div>
{props.name}를 배워봅시다!
</div>
);
};
export default Hello;Hello.js에서 props값을 인자로 받음. App.js에서 넘겨주는 props값을 사용할 수 있음.
App.js에서 props의 이름을 name으로 넘겨줬기 때문에 props.name으로 값을 불러와 줌. 그러면 출력값으로 props의 문자열 데이터인 "react"가 출력 됨.
넘겨주는 props가 하나일 경우에는 위의 방식을 사용하면 되지만 props의 종류가 많아지면 가독성이 떨어짐. 이럴 경우 비구조화 문법을 사용하면 코드가 간결해질 수 있음.
여러 개의 props를 전달할 때도 위의 방식대로 하면 됨
import './App.css';
import Hello from './Hello.js';
function App() {
return (
<div>
<Hello name="react" color="blue"/>
</div>
);
};
export default App;컴포넌트에서도 같은 방식으로 불러옴.
import React from "react";
function Hello(props){
return(
<div style={{color: props.color}}>
{props.name}를 배워봅시다!
</div>
);
};
export default Hello;props가 여러 개이기 때문에 props.변수명 으로 할당해 줌.
비구조화 문법을 사용하면 좀 더 간결하게 만들수 있음.
import React from "react";
function Hello({name,color}){
return(
<div style={{color: color}}>
{name}를 배워봅시다!
</div>
);
};
export default Hello;두 방식 모두 같은 결과를 보여줌
조건부 렌더링
- 컴포넌트를 바로 불러와 실행시키면 렌더링 이슈가 발생할 수 있음.
- 핵심 props의 정보가 없거나 오류의 경우
- 해당 props의 정보가 있을 때 설정한 페이지를 렌더링하도록 조건부 렌더링이 가능한 코드를 작성
import './App.css';
import Hello from './Hello.js';
function App() {
const arr = [1,2,3];
return (
<div>
<Hello name="react" color="blue" arr={arr}/>
</div>
);
};
export default App;위의 코드처럼 임의의 배열을 Hello.js에서 출력해야 한다고 할 때
import React from "react";
function Hello({name,color,arr}){
return(
<div style={{color: color}}>
{ arr ? <b>{arr}</b>: null
} {name}를 배워봅시다!
</div>
);
};
export default Hello;삼항연산자를 통해 배열의 값이 true일 때 해당 배열을 출력하도록 한다.
만약 출력값이 달라지는 경우에는 삼항 연산자를 사용하지만 위의 코드처럼 출력만 하는 경우에는 && 연산자를 사용한다.
import React from "react";
function Hello({name,color,arr}){
return(
<div style={{color: color}}>
{ arr && <b>{arr}</b>}
{name}를 배워봅시다!
</div>
);
};
export default Hello;
useState
리액트에서 데이터를 수정할 때는 직접 수정할 수 없다. useState를 통해 데이터를 읽고 수정할 수 있다. 사용법은 간단하다.
const [num, setNum] = useState(0);위의 코드에서 num은 state값을 읽는데 사용한다. 현재 num을 출력하면 0이 출력된다. setNum은 setter함수이다. state값을 수정할 때 해당 함수를 불러와 수정할 수 있다.
setNum(5);- setNum으로 수정된 num의 값은 5로 출력된다.
- 이렇게 선언한 state값과 setter함수도 props로 전달이 가능하다. 하지만 수정된 state값은 컴포넌트가 다시 실행되거나 페이지가 새로고침될 때 원래 값으로 돌아온다. state값을 저장해서 사용하고 싶다면 전역변수라이브러리(redux, recoil 등)을 사용해야 한다.
- 로컬스토리지에 저장해서 꺼내쓰는 방법도 가능하다.
