본문 바로가기
반응형

JavaScript49

23.클래스형 컴포넌트 함수형 컴포넌트 + Hooks 로 못하는 작업이 2개정도 있음 추가적으로, 옛날에 만들어진 리액트 관련 라이브러리의 경우에는 Hooks 지원이 아직 안되는 경우도 있고, react-native 관련 라우터 라이브러리인 react-native-navigation 의 경우에도 클래스형 컴포넌트를 어쩔 수 없이 써야 하는 일이 종종 있음 클래스형 컴포넌트를 만드는 방법 Hello.js import React from 'react'; function Hello({ color, name, isSpecial }) { return ( {isSpecial && *} 안녕하세요 {name} ); } Hello.defaultProps = { name: '이름없음' }; export default Hello; 이 컴포넌트를.. 2021. 8. 4.
22.Immer 를 사용한 더 쉬운 불변성 관리 리액트에서 배열이나 객체를 업데이트 해야 할 때에는 직접 수정 하면 안되고 불변성을 지켜주면서 업데이트를 해주어야 함 const object = { a: 1, b: 2 }; object.b = 3; 다음과 같이 하면 안되고 const object = { a: 1, b: 2 }; const nextObject = { ...object, b: 3 }; 다음과 같이 ... 연산자를 사용해서 새로운 객체를 만들어주어야 함 const todos = [ { id: 1, text: '할 일 #1', done: true }, { id: 2 text: '할 일 #2', done: false } ]; const inserted = todos.concat({ id: 3, text: '할 일 #3', done: false }.. 2021. 8. 4.
21.Context API 를 사용한 전역 값 관리 우리가 현재 만들고 있는 프로젝트를 보면, App 컴포넌트에서 onToggle, onRemove 가 구현이 되어있고 이 함수들은 UserList 컴포넌트를 거쳐서 각 User 컴포넌트들에게 전달이 되고 있음 여기서 UserList 컴포넌트의 경우에는 onToggle 과 onRemove 를 전달하기 위하여 중간 다리역할만 하고 있음 function UserList({ users, onRemove, onToggle }) { return ( {users.map(user => ( ))} ); } UserList 에서는 해당 함수들을 직접 사용하는 일도 없음 지금과 같이 특정 함수를 특정 컴포넌트를 거쳐서 원하는 컴포넌트에게 전달하는 작업은 리액트로 개발을 하다보면 자주 발생 할 수 있는 작업 위와 같이 컴포넌트.. 2021. 8. 3.
20.커스텀 Hooks 만들기 컴포넌트를 만들다보면, 반복되는 로직이 자주 발생 예를 들어서 input 을 관리하는 코드는 관리 할 때마다 꽤나 비슷한 코드가 반복 그러한 상황에 커스텀 Hooks 를 만들어서 반복되는 로직을 쉽게 재사용하는 방법은? src 디렉터리에 hooks 라는 디렉터리를 만들고, 그 안에 useInputs.js 라는 파일을 만듦 커스텀 Hooks 를 만들 때에는 보통 이렇게 use 라는 키워드로 시작하는 파일을 만들고 그 안에 함수를 작성 커스텀 Hooks 를 만드는 방법은 굉장히 간단함 그냥, 그 안에서 useState, useEffect, useReducer, useCallback 등 Hooks 를 사용하여 원하는 기능을 구현하고, 컴포넌트에서 사용하고 싶은 값들을 반환해주면 됩니다. useInputs.js.. 2021. 8. 3.
반응형

티스토리툴바