기초다지기/react14 React Hook에 대해 알아보자 React Hook React Hook은 React 16.8 버전에서 도입된 기능으로, 함수형 컴포넌트에서도 상태(state) 와 생명주기 메서드를 사용할 수 있게 해준다. 1. useState function ImageGallery() { const [index, setIndex] = useState(0); // ... 사용자 입력과 같은 정보를 기억할 수 있다. 2. useContext function Button() { const theme = useContext(ThemeContext); // ... 구성 요소가 정보를 props로 전달하지 않고 멀리 있는 부모로부터 정보를 받을 수 있다. 3. useRef function Form() { const inputRef = useRef(null); /.. 2023. 12. 26. Tab menu 쉽게 만들기 만들어 볼 것 버튼 값에 따라 아래 보여지는 내용이 달라지는 탭메뉴를 쉽게 만들어봤다 1. 버튼 구성 const tabs = [ { id: 'default', label: '후라이드' }, { id: 'spicy', label: '양념' }, ]; tabs 배열을 선언 후 각 요소에 id와 label 속성을 가진 객체 구성 2. 탭버튼 생성 // 위에서 선언한 tabs 배열을 사용하여 동적으로 탭 버튼 생성 {tabs.map((tab) => ( handleTabClick(tab.id)} > {tab.label} ))} tabs.map() : map을 사용하여 배열의 각 요소에 대해 콜백 함수 호출 key : 배열을 렌더링할 때 각 요소를 식별하는 역할 type : button : 버튼으로 설정시 기본 동.. 2023. 8. 1. 이전 1 2 3 다음
