🧩 React로 재사용 가능한 버튼 컴포넌트 만들기
🪄 보통 버튼은 1-2가지 유형으로 만들어놓고 프로젝트 전반에 걸쳐 재사용하게 된다. 이렇게 UI 요소를 더욱 효율적으로 재사용하기 위해 사용하는 것이 React.js인 점을 기억하고 있을 것이다. 그래서 React를 배우고 있는 것이고!
오늘은 React 학습 목표에 조금 더 가까워지기 위한 예제를 만들어 볼 것이다.
핵심은 primary 용도로 사용할 공통 버튼 컴포넌트를 하나 만들고, props라는 것을 통해 버튼마다 텍스트, 크기 등의 차이를 유연하게 줄 수 있게 구성해보는 것이다.
🔸 React.js 🔸
👍🏻 공통 버튼 컴포넌트(Btn()) 작성
🔹 click 이벤트나, style, id, class 등 html 속성을 작성할 수 있다. style의 경우에는 object 형식으로 나열한다.
🔹 인수로 text, changeValue를 받는 것은 버튼 안에서 어떤 글자를 보여줄 것인지 또는 어떤 동작을 해야하는지 알기 위해서이다. 예를들어, 주문 받은 피자의 토핑(text)과 굽는 방식(changeValue)을 주방(컴포넌트)에 알려주는 것과 같다.
🔹 그런데 이때, 인수를 props 자체로 받아도 되고, 구조분해할당으로 바로 받는 방법이 있다. props는 object라 {props.text} 처럼 써야한다. 하지만 구조분해할당({text, changeValue})으로 바로 받는다면 {text} 처럼 간결하고 직관적인 사용이 가능해서 이 방법을 권장한다.
👍🏻 React.memo()
🔹 const MemorizedBtn = React.memo(Btn); : Btn 컴포넌트를 기억하고 있다가 props가 이전과 동일하다면, re-render하지 않겠다는 코드
🔹 요소 상태의 변경이 있을 때마다, re-render 되는데 이것은 상당히 비효율적이다. React가 변경된 부분만 빠르게 업데이트 시켜서 효율성을 증대시킨다는 장점이 있으니 배우고 있는 것이 아니겠는가? 따라서 우리는 props가 변경되지 않는다면 re-render 시키지 않을 것이라는 memo 속성을 사용해줄 것이다.
🔹 즉, text나 changeValue가 변하지 않으면 은 re-render 되지 않음.
👍🏻 렌더링 함수 (+props란?)
🔹 const [value, setValue] = React.useState("Save Changes"); : value(상태 관리), setValue(변경 될 값), value의 초기값으로 Save Changes 설정
🔹 const changeValue = () => { setValue("Revert Changes") }; : 버튼 클릭 시, Revert Changes로 변경
🔹 <MemorizedBtn text={value} big={true} changeValue={changeValue} /> : text와 changeValue를 MemorizedBtn 컴포넌트에 props로 전달
🔹 여기서 props란, 컴포넌트에서 직접 실행되지 않고, function에서 props를 전달받아 실행되는 것! 즉, changeValue라는 props는 Btn컴포넌트에서 onClick 이벤트에 연결되어 실행되고, 이로 인해 상태가 변경되며 value 값이 Revert Change로 바뀐다. 상태가 변경되면 컴포넌트가 다시 렌더링 되고, 버튼 내부에 표시되는 {text} 값도 변경된 Revert Change로 업데이트 되어 나타난다.
<script type="text/babel">
const root = document.querySelector('#root');
// primary btn 컴포넌트
function Btn({ text, changeValue }){
return (
<button
onClick={changeValue}
style={{
//object 형식으로 씀
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
borderRadius: 10
}}>
{text}
</button>
)
}
const MemorizedBtn = React.memo(Btn);
// 컴포넌트 렌더링
function App() {
const [value, setValue] = React.useState("Save Changes");
const changeValue = () => { setValue("Revert Changes") };
return (
<div>
// Continue 버튼 1개 + Save Changes -> Revert Changes 변경되는 버튼 1개
<MemorizedBtn text={value} big={true} changeValue={changeValue} />
<MemorizedBtn text="Continue" />
</div>
);
}
ReactDOM.render(<App />, root);
</script>🪄 와.. 갑자기 머리가 새하얘지기 시작한 것 같다. 근데 너무 재밌어...!! 근데 어려워!!!! 혼란스럽다.
