https://nomadcoders.co/react-for-beginners
ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders
React for Beginners
nomadcoders.co
Props란?
- 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 일종의 방식
- 부모에 props를 사용하면, 자식 컴포넌트의 인자로 객체가 들어가게됨
<!DOCTYPE html>
<html>
<body id="root"></body>
<!--React import-->
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<!--React-dom import-->
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<!--Babel standalone-->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
//중괄호 안이 props
function Btn({ text, big }) {
console.log(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" big={false} />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
=> 하나의 버튼을 만들어서 props를 이용해 버튼의 스타일을 관리하여 재사용 가능
(만들었던 컴포넌트가 변화를 조금씩만 주면서 반복적으로 쓰이는 것이라면 props를 사용하는것이 좋음)
<!DOCTYPE html>
<html>
<body id="root"></body>
<!--React import-->
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<!--React-dom import-->
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<!--Babel standalone-->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
//{}안에는 props
function Btn({ text, changeValue }) {
console.log(text, "was rendered");
return (
<button
//여기서 onClick은 prop이 아닌 EventListener
onClick={changeValue}
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
}}
>
{text}
</button>
);
}
function App() {
const [value, setValue] = React.useState("Save Changes");
//changeValue는 setValue를 부름 -> Revert Changes로 값을 재설정
const changeValue = () => setValue("Revert Changes");
return (
<div>
{/*state(=value)에 연결*/}
{/*text={value}와 changeValue={changeValue}은 Btn으로 들어가는 prop의 이름, button을 위한 EventListener가 아님!*/}
{/*Btn안에는 style을 달 수 없음 -> 이 상황에서 style은 직접적으로 button에 달리지 않음, prop들을 가져와서 적용 시켜야함*/}
<Btn text={value} changeValue={changeValue} />
<Btn text="Continue" />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
<!DOCTYPE html>
<html>
<body id="root"></body>
<!--React import-->
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<!--React-dom import-->
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<!--Babel standalone-->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function Btn({ text, changeValue }) {
console.log(text, "was rendered");
return (
<button
onClick={changeValue}
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
}}
>
{text}
</button>
);
}
//MemorizedBtn은 memorized version의 Btn이 될 것
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>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
React Memo란?
- 특정 컴포넌트가 다시 리렌더링 되는것을 원하지 않을 때
(단, prop이 변경되지 않는 선에서)
ex) 첫번째 Btn은 바뀜 -> props는 state와 연결되어 있기 때문에 state가 변경된다면 같이 변경되어야 함
(* value가 Save Changes로부터 Revert Changes로)
하지만
두번째 Btn은 절대 바뀌지 X -> 리렌더링 되지 않아야 함
Saved Changes를 클릭했을 때 단 한번만 리렌더링 되는 이유?
- 이 prop(value)은 변경되었기 때문 -> state가 변했다는 뜻( const changeValue = () => setValue("Revert Changes");),
이 state는 이 prop(value)에 연결되어 있음
'Study > React' 카테고리의 다른 글
| [노마드코더] ReactJS로 영화 웹 서비스 만들기 - create react app (0) | 2023.01.18 |
|---|---|
| [노마드코더] ReactJS로 영화 웹 서비스 만들기 - prop types (0) | 2023.01.17 |
| [노마드코더] ReactJS로 영화 웹 서비스 만들기 - State Functions (0) | 2023.01.11 |
| [노마드코더] ReactJS로 영화 웹 서비스 만들기 - setState (0) | 2023.01.10 |
| [노마드코더] ReactJS로 영화 웹 서비스 만들기 - State (0) | 2023.01.05 |
