React #3

배..고파

---

✅ 프로퍼티(Props)란?

• 부모 컴포넌트로부터 자식 컴포넌트에게 데이터를 전송하는 방식
• 부모에 props를 사용하면,
  자식 컴포넌트에서 인자에 객체([ ])로 받아 사용할 수 있다.
• 프로퍼티는 수정할 수 없다는 특징이 있다.(자식입장에선 읽기 전용인 데이터이다.)
• 사용방법은, 프로퍼티에 문자열을 전달할 때에는 ("")큰 따옴표를,
  문자열 외의 값을 전달할때는 ({}) 중괄호를 사용한다.
• 예를들어, props 방식을사용하면 하나의 버튼을 만들어서 props를 이용해 버튼의 스타일을 관리해서 재사용 할 수도 있게 된다.
• 예시)

function SaveBtn() {
	return <button>Save Changes</button>;
}

function ConfirmBtn() {
	return <button>Confirm</button>;
}

function App() {
	return (
    	<div>
    		<SaveBtn />
    		<ConfirmBtn />
		</div>
	);
}

• 총 2개의 버튼을 만든 후, 함수형 컴포넌트로 전달했다.
• 버튼을 꾸미기 위한 스타일을 추가해주자.

function SaveBtn() {
	return <button 
    	style={{
        	backgroundColor:"tomato",
            color:"white",
            padding:"10px 20px",
            border:0,
            borerRadius:10,
    	}}>
        	Save Changes
            </button>;
}

function ConfirmBtn() {
	return <button>Confirm</button>;
}

function App() {
	return (
    	<div>
    		<SaveBtn />
    		<ConfirmBtn />
		</div>
	);
}

• SaveBtn() 에 스타일을 추가했다.
• 그러나 우리에게는 총 두개의 버튼이 있다. 위와 같은 상태에서 ConfirmBtn() 버튼에도 스타일을 추가해야한다면?
• 스타일을 복사 붙여넣기 할 필요 없이,
  스타일을 갖고 있는 한 개의 컴포넌트를만들어 관리해주자!

function Btn() { <<<---
	return <button 
    	style={{
        	backgroundColor:"tomato",
            color:"white",
            padding:"10px 20px",
            border:0,
            borerRadius:10,
    	}}>
        	{text}
            </button>;
}

function App() {
	return (
    	<div>
    		<Btn text="Save Change" /> <<<---
    		<Btn text="Confirm"/> <<<---
            //→ 이름은 아무렇게나 지어도 된다.
		</div>
	);
}

• 부모 컴포넌트에 props를 추가해주었으면 (text), 자식 컴포넌트에서 인자로 값을 받아 사용해주면된다.

function Btn(porps) { <<<---
//→ 첫번째 인자의 이름은 아무렇게나 지어도 된다.
//→ 첫번째 인자는 객체(object).
	return <button 
    	style={{
        	backgroundColor:"tomato",
            color:"white",
            padding:"10px 20px",
            border:0,
            borerRadius:10,
    	}}>
        	{porps.text} <<<---
            </button>;
}

• 좀 더 짧게 작성하자면 ...
  중괄호를 열어 오브젝트로부터 text를 받아오자

function Btn({ text }) { <<<---
	return <button 
    	style={{
        	backgroundColor:"tomato",
            color:"white",
            padding:"10px 20px",
            border:0,
            borerRadius:10,
    	}}>
        	{text} <<<---
            </button>;
}

• done!

✅ React.memo()

• 컴포넌트의 props,state(상태)가 바뀌지 않았다면, 리렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화를 해줄 수 있는 기능
• 사용방법은 엄청 간단하다. 그냥 React.memo() 괄호안에 감싸주면 된다.
• 예시)

function App() {
	const [value, setValue] = useState("Save Changes")
    const ChangeValue = () => setValue("Revert Changes")
	return (
    	<div>
    		<Btn text={value} onClick={ChangeValue} />
    		<Btn text="Continue"/>
		</div>
	);
}

• 여기서 주의!
  <Btn text={value} onClick={ChangeValue} /> 에 있는 onClick={ChangeValue} 은 이벤트리스너가 아닌, prop 이다.
  따라서, 자식 컴포넌트에 전달한 후 이벤트리스너로 등록해주어야한다.

function Btn({ text, onClick }) { <<<---
	return <button 
    	onClick={onClick} <<<---
    	style={{
        	backgroundColor:"tomato",
            color:"white",
            padding:"10px 20px",
            border:0,
            borerRadius:10,
    	}}>
        	{text} 
            </button>;
}

• 이제 버튼(Btn)을 클릭하면 onClick 함수가 호출되며, 첫번째 Btn 의 value 값이 변경(업데이트)되는데,
  그때 부모 컴포넌트(App)의 return 에 포함되어있는 코드들이 모두 리렌더링된다.
  값이 업데이트 되었거나 상태가 변하지 않았기에 리렌더링 될 필요가 없는 두번째 Btn 도 말이다.
• 따라 React.memo() 를 사용하여, 컴포넌트의 props,state(상태)가 바뀌지 않은 것은 리렌더링하지 말라 명령하면 된다.

function Btn({ text, onClick }) { 
	return <button 
    	onClick={onClick} 
    	style={{
        	backgroundColor:"tomato",
            color:"white",
            padding:"10px 20px",
            border:0,
            borerRadius:10,
    	}}>
        	{text} 
            </button>;
}

const MemorizedBtn = React.memo(Btn) <<<---

function App() {
	const [value, setValue] = useState("Save Changes")
    const ChangeValue = () => setValue("Revert Changes")
	return (
    	<div>
    		<MemorizedBtn text={value} onClick={ChangeValue} /> <<<---
    		<MemorizedBtn text="Continue"/> <<<---
		</div>
	);
}

• 이렇게 하면, 첫번째 btn, 첫번째 MemorizedBtn만 리렌더링되며 두번째는 리렌더링되지 않는다.
• 컴포넌트가 React.memo()로 wrapping 될 때, React는 컴포넌트를 렌더링하고 결과를 메모이징(Memoizing)한다. 그리고 다음 렌더링이 일어날 때 props가 같다면, React는 메모이징(Memoizing)된 내용을 재사용한다.

const MyComponent = React.memo(function MyComponent(props) {
         /* props를 사용하여 렌더링 */
});

---

🚩 React memo : https://ko.reactjs.org/docs/react-api.html#reactmemo