React8 6.5장 6.5 reselect 패키지로 선택자 함수 만들기 원본 데이터를 다양한 형태로 가공해서 사용할 수 있게 도와줌 리덕스 데이터를 리액트 컴포넌트에서 필요한 데이터로 가공하는 용도로 많이 사용 export const getTodoList = createSelector(getTodos, (todos) => todos.todoList.filter((todo) => !todo.isCompleted) ); createSelector를 사용하여 매개변수로 들어온 getTodos 값이 변하지 않으면 계산을 수행하지 않는다. 메모제이션 기능을 이용하여 이전값과 비교하여 변경되면 변경된값을 연산을 수행하고 아닌 경우 이전값을 그대로 사용한다. 상태값 외에도 속성값을 입력 받을 수 있다. // FriendMain expo.. 2023. 3. 10. 6.4장 6.4 리액트 상태값을 리덕스로 관리하기 리덕스는 JS를 사용하는 모든 곳에서 사용이 가능하다. 리액트의 컴포넌트 상태값과 리덕스의 상태값이 불변 객체이고 이는 변경 여부확인이 빨라 렌더링 속도가 향상된다. 리액트와 리덕스가 궁합이 잘 맞기때문에 자주 사용된다. 6.4.1 react-redux 패키지 없이 직접 구현하기 const reducer = combineReducers({ timeline : timelineReducer, friend: friendReducer }); const store = createStore(reducer); export default store; 스토어를 생성하여 객체를 내보내서 원하는 곳에서 사용가능하게 만든다. // TimelineMain.js const [, force.. 2023. 3. 10. 3.6 장 3.6 리액트 내장 훅 살펴보기 다양한 내장된 훅들을 제공한다. 3.6.1 Consumer 컴포넌트 없이 콘텍스트 사용하기 : useContext ContextAPI에서 Consumer 사용없이 Provider로 부터 전달된 값을 사용할 수 있다. function Childcomponent() { const user = useContext(UserContext) } 사용하기 간편한 장점이 있다. 3.6.2 렌더링과 무관한 값 저장하기 : useRef 컴포넌트 내부에서 생성되는 값 중 렌더링과 무관한 현재 쓰지않는 값을 저장한 후 나중에 사용하기 위해 사용한다. 이전 상태를 저장했다가 원하는 곳에 사용하는데 사용됨. 3.6.3 메모제이션 훅 : useMemo, useCallback useMemo 와 use.. 2023. 2. 10. 3.5 장 3.5 Ref 속성값으로 자식 요소에 접근하기 돔 요소에 직접 접근해야 할 때 사용한다. Ref(Reference)를 사용하면 자식 요소에 직접 접근할 수 있고, 요소에 포커스를 주거나 요소의 크기 및 스크롤 위치 등을 알 수 있다. 3.5.1 ref 속성값 이해하기 function TextInput() { const inputRef = useRef; useEffect(() => { inputRef.current.focus(); }, []); return ( 저장 ); } useRef 훅을 사용하여 반환된 ref 객체를 통해 자식 요소의 ref 속성값에 객체를 넣는다. 돔 요소 혹은 컴포넌트가 생성되면 ref 객체로 접근이 가능하다. 컴포넌트의 렌더링 결과가 돔에 반영된 후에 호출해오기 때문에 이미 요소.. 2023. 2. 10. 3.4장 3.4 콘텍스트 API로 데이터 전달하기 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하기 위해서 속성값이 사용된다. 상위 컴포넌트에서 내가 가고싶은 하위 컴포넌트까지 전달하는데 중간에 거치는 컴포넌트에서도 불필요하게 속성값이 들어가는 무의미한 경우가 발생한다. 이를 방지하기 위해 콘텍스트 API를 이용하여 중첩 구조가 복잡한 상황에서도 원하는 컴포넌트에 쉽게 데이터를 전달할 수 있다. 3.4.1 콘텍스트 API 이해하기 콘텍스트 API를 이용하면 중간에 다른 컴포넌트가 개입하지 않아도 속성값을 전달할 수 있다. const UserContext = React.createContext(""); function App() { return ( 상단 메뉴 하단 메뉴 ); } function Profile() .. 2023. 2. 4. 3.3장 3.3 리액트 훅 기초 익히기 함수형 컴포넌트에 기능을 추가할 때 사용한다. 상태값을 사용할 수 있고, 자식 요소에 접근할 수 있다. 훅이 주는 장점이 되게 다양하고 적극적으로 개발 진행중이라고 한다. 3.3.1 상태값 추가하기 : useState useState를 사용하면 배열을 반환해주고 배열의 첫 번쨰 원소는 상태값, 두 번째 원소는 상태값 변경 함수다. 상태값 변경함수가 호출 될 경우 해당 컴포넌트를 다시 렌더링하고 자식도 같이 렌더링 된다. 상태값 변경 함수는 비동기 동작을 진행하며 배치처리를 진행하여 한번에 처리한다. function MyComponent() { const [count, setCount] = useState({ value : 0}); function onClick() { set.. 2023. 2. 3. 이전 1 2 다음
