공부 기록/React & etc. (2) 썸네일형 리스트형 State VS Ref State(상태) - 컴포넌트의 내부 데이터를 나타낸다. - 업데이트 함수를 통해 변화가 이루어졌을 때 컴포넌트들의 재실행을 야기한다. => UI에 바로 반영되어야 하는 값들이 있을 때 사용한다. => 시스템 내부에 보이지 않는 쪽에서만 다루는 값들이나 UI에 직접적인 영향을 끼치지 않는 값들을 갖고 있을 경우에는 상태를 사용하지 말아야 한다. Ref(참조) - 리액트 요소에 대한 참조를 나타낸다. - 컴포넌트들이 재실행되게 하지 않는다. => 리액트의 렌더링 주기와는 관련 없는 데이터를 관리할 수 있다. (DOM 조작이나 애니메이션, 포커스 관리 등) => DOM 요소에 직접적인 접근이 필요할 때 혹은 외부 라이브러리를 통해 관리하기 어려운 상태를 관리할 때 사용한다. Attribute props VS Children props Attribute props import TabButton from "./components/TabButton"; function App() { return ( ... ... ); } export default App; - App.jsx에서 TabButton 컴포넌트에 label이라는 props를 정의하고 "Components"라는 값을 할당했다. export default function TabButton({ label }) { return ( {label} ); } // 또는 export default function TabButton(props) { return ( {props.label} ); } - TabButton.jsx 에서의 사용은 위와 같다. Children Props import Tab.. 이전 1 다음
