✍ JSX로 컴포넌트의 style 변경하기
function SaveBtn() { return ( <button style={{ backgroundColor: "pink", color: "white", padding: "10px 20px", border: 0, borderRadius: 10, }} Save Changes </button> ); }
동일한 스타일 속성을 복붙하지 않고 적용하려면?
<script type="text/babel">
function Btn({ text, big }) {
return (
<button
style={{
backgroundColor: "pink",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
margin: 5,
fontSize: big ? 16 : 12,
}}
>
{text} //
</button>
);
}
function App() {
return (
<div>
<Btn text="Save Changes" big />
<Btn text="Confirm" />
</div>
);
}
App()
컴포넌트는 <Btn />
컴포넌트 2개를 불러옴.<Btn />
컴포넌트의 property는 object 형태로 Btn()
의 인수로 들어감Btn()
의 ( ) 안에 props의 key 값을 object 형태로 넣어서 함수 안에서 자유롭게 사용 가능📌 컴포넌트들이 공통으로 갖고있는 요소와 각각 다른 속성을 갖고있는 요소 파악해야함
✍ 부모 컴포넌트의 state가 변경되었을 때 자식 컴포넌트의 속성 변경하기
function Btn({ text, onClick }) {
return (
<button
onClick={onClick}
style={{
backgroundColor: "pink",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
margin: 5,
}}
>
{text}
</button>
);
}
function App() {
const [value, setValue] = React.useState("Save Changes");
const changeValue = () => setValue("Revert Change");
return (
<div>
<Btn text={value} onClick={changeValue} />
<Btn text="Confirm" />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
<Btn />
컴포넌트의 props onClick
은 changeValue라는 함수를 값으로 가지고 있음onClick
을 Btn()
의 인수로 전달(수기로 해줘야함)Btn()
이 반환하는 <button>
태그에 eventListener(onClick)를 추가한 후 prop onClick
을 전달함 -> 클릭 이벤트가 발생하면 changeValue
함수 실행📌 <Btn />
컴포넌트의 prop onClick
은 eventListenr가 아님 (반드시 실제 자식 컴포넌트의 해당 element에 eventListener 추가해줘야함)
*{key}와 key의 차이
function Btn({ text, onClick }) { console.log({text}); // {text: 'Save Changes'} // {text: 'Confirm'} return ( <button onClick={onClick}> {text} </button> ); }
- props object 그대로 출력
function Btn({ text, onClick }) { console.log(text); // 'Save Changes', 'Confirm' 출력 return ( <button onClick={onClick}> {text} </button> ); }
- props object에서
text
라는 key값의 value 출력function Btn(props) { console.log(props.text); return ( <button onClick={props.onClick}> {props.text} </button> ); }
위와 같은 의미!
React.memo()
onClick 이벤트로 state 값이 바뀌면App()
의 자식 컴포넌트 전체가 re-render됨
=> ✍ 부모 컴포넌트의 state가 변경되었을 때 props가 변경되지 않은 자식 컴포넌트는 다시 render하지 않도록 하기const MemorizedBtn = React.memo(Btn); function App() { const [value, setValue] = React.useState("Save Changes"); const changeValue = () => setValue("Revert Change"); return ( <div> <MemorizedBtn text={value} onClick={changeValue} /> <MemorizedBtn text="Confirm" /> </div> ); } const root = document.getElementById("root"); ReactDOM.render(<App />, root);
React.memo()
의 ( ) 안에 기억할 컴포넌트 넣어줌- 클릭 이벤트가 발생했을 때 props가 변경된 Save Changes(Revert Change) 버튼은 다시 render 되지만 Confirm 버튼은 render 되지 않음
=> 성능 최적화에 유용
✍ React에서 컴포넌트의 각 props의 type을 정해놓고 싶을 때
Btn.propTypes = {
text: PropTypes.string,
fontSize: PropTypes.number,
};
Component.propTypes = { key: PropTypes.type };
{ key: PropTypes.type.isRequired }
로 설정할 수 있음📌 다른 타입의 value가 props에 부여되었을 때 Console에서 경고를 확인할 수 있음