Render Props는 리액트에서 컴포넌트 간에 코드 재사용을 쉽게 하기 위한 패턴이다. 주로 함수형 컴포넌트에서 사용되며, 컴포넌트의 props로 함수를 전달받아 렌더링 동작을 동적으로 정의할 수 있다.  Render Props 기본 예제 function DataFetcher({ render }) { const data = { name: 'Alice', age: 25 }; // 가상의 데이터 return {render(data)};}function App() { return ( Name: {data.name}, Age: {data.age}} /> );}DataFetcher 컴포넌트는 render라는 prop으로 함수를 받는다.이 함수는 데이터를 렌더링할..

UI = function (state) 물은 얼음과 같은 성분이지만, 온도에 따라 다른 상태를 가진다. 마찬가지로, React Component(ex. )는 요소 자체는 그대로이지만, 상태를 담당하는 변수의 값에 따라 다른 UI를 가진다. React에서 UI를 변경하는 데에는 Declarative Programming과 Imperative Programming 2가지 방식이 있다. Declarative는 .jsx(js) 파일 상단에서 선언했던 상태 저장용 변수를, UI 변경을 담당하고자 만든 커스텀 함수의 body에서 변형시킴으로써(true->false처럼 toggle을 쓰는 등) 목적을 달성하는 방법이다. Imperative는 document.querySelector 등으로 해당 HTML 요소에 접근하..