nomad code_react js로 영화앱 만들기_#4.1
2022. 11. 11. 17:12ㆍreact
<body>
<div id="root"></div>
</body>
<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,
fontSize: 16
}}>
{text}
</button>
);
};
const MemorizeBtn = React.memo(Btn);
function App(){
const [value, setValue] = React.useState("Save Changes");
const changeValue = () => setValue("Revert Changes");
return(
<div>
<MemorizeBtn text={value} changeValue={changeValue} /> /* 이벤트리스너x 프로퍼티o */
<MemorizeBtn text="Continue" />
</div>
);
};
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>- 컴포넌트 안에 작성되는 내용들은 모두 프로퍼티(props) 이다. 이벤트리스너의 이름을 갖고있어도 컴포넌트 안에 작성되면 프로퍼티로 적용된다.
- 컴포넌트 안에 작성한 프로퍼티는 함수의 인자값으로 넣어주어야 사용할 수 있다.
- React.memo는 컴포넌트의 내용이 수정되지 않으면 랜더링 하지 않게 해준다.
'react' 카테고리의 다른 글
| nomad code_react js로 영화앱 만들기_#5.0 (create-react-app) (0) | 2022.11.14 |
|---|---|
| nomad code_react js로 영화앱 만들기_#4.2 (0) | 2022.11.14 |
| nomad code_react js로 영화앱 만들기_#4.0 (0) | 2022.11.11 |
| nomad code_react js로 영화앱 만들기_#3.9 (0) | 2022.11.09 |
| nomad code_react js로 영화앱 만들기_#3.5 ~ 3.8 (0) | 2022.11.09 |