React에서 Props는 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하는 데 사용되는 매커니즘이다.
요소를 만들 때마다 스타일들을 작성해주는 것은 너무 시간이 오래 걸린다.
그 대신 스타일들을 모두 갖는 단 한가지의 컴포넌트를 만들어서 사용할 수 있다.
Props
코드 예시
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function Btn({text, big}) {
return <button style={{
backgroundColor: "tomato",
color: "white",
padding:"10px 20px",
border: 0,
borderRadius:10,
fontSize: big ? 18 : 16,
}}>
{text}
</button>
}
function App(){
return(
<div>
<Btn text="Save Changes" big={true} />
<Btn text ="Continue" />
</div>
)
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>내가 만들고 사용하는 모든 컴포넌트들은 function Btn() -> 괄호로 argument(인자)를 받는데,
이 때 argument의 이름은 마음대로 지어줄 수 있다.
리액트가 실제로 하는 작업은 함수(Btn())를 호출해서 우리가 넣어둔 모든 것들을 첫 번째 인자로 넣어주는 것이다.
Btn 컴포넌트의 prop들에게 접근하려면 prop.text 등으로 적어준다.
React.memo()
props에 function도 보낼 수 있다.(JSX로 html 태그 자체에 이벤트 리스너를 넣는것과는 전혀 다르다!)
그저 이벤트를 실행시키는 함수가 프로퍼티로 들어간 것이다.
(prop은 그냥 부모에서 자식으로 데이터를 넘길 때 사용하는 argument의 역할이므로)
-> 부모의 상태를 바꾸는 함수를 만들었고, 부모 컴포넌트에서 그 함수를 prop으로 보내면 자식 컴포넌트에서 그 함수가 실행된다.
부모 컴포넌트의 state를 변경하면 자식 컴포넌트들도 Re-render가 일어난다.
-> 이 때 React.memo()로 prop의 변경이 일어난 부분만 렌더링 시킬 수 있다.
(아주 많은 자식 컴포넌트를 가지고 있는 부모 컴포넌트일 때 사용하자)
컴포넌트가 React.memo()로 wrapping 된다면
1. React는 컴포넌트를 렌더링하고 결과를 메모이징한다.
2. 그리고 다음 렌더링이 일어날 때 props가 같다면, React는 메모이징(Memoizing)된 내용을 재사용한다.
예시 코드
const MemorizedBtn = React.memo(Btn);
function App(){
const [value, setValue] = React.useState("Save Changes");
const changeValue = () => setValue("Revert Changes");
return(
<div>
<MemorizedBtn text={value} changeValue ={changeValue} />
<MemorizedBtn text ="Continue" />
</div>
)
}propTypes()
React는 parameter를 잘못 넘겨도 확인할 수 없다. -> propTypes() 모듈을 사용하자.
type과 다르게 입력 되었거나 parameter 값을 넣지 않는다면 경고 메시지가 뜬다.
function Btn({text, fontSize = 16}) {
// (...) 중략
Btn.propTypes = {
text: PropTypes.string.isRequired,
fontSize: PropTypes.number,
}
위 내용은 노마드코더의 'ReactJS로 영화 웹 서비스 만들기' 강의에서 알려준 내용 중 일부를 포함하고 있습니다.
React에 대해서 자세하고 친절하게 가르쳐주셔서 만족하면서 듣고 있습니다.
(밑에 링크로 들어가면 수강할 수 있습니다. 무료 강의 입니다.)
https://nomadcoders.co/react-for-beginners
ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders
React for Beginners
nomadcoders.co
'Frontend > React' 카테고리의 다른 글
| [React, TS] 프로젝트를 진행하며 상태 관리에 대해 알게 된 것들 (1) | 2024.01.13 |
|---|---|
| [React] useEffect()에 대해서 (0) | 2023.08.17 |
| [React] useState()에 대해서 (0) | 2023.08.17 |
| [React] createElement, ReactDOM, JSX에 대해서 (0) | 2023.08.17 |
| [React] npx create-react-app이 잘 실행되지 않는다면?(NPM 레지스트리 URL 에러) (0) | 2023.08.11 |
