목록 분류 전체보기 (191)
이롭게 현명하게
목차 useReducer useReducer와 useState import [useReducer] 리액트에서 컴포넌트의 상태 관리를 위해 기본적으로 가장 많이 사용하는 Hook은 state이다. 공식 문서에서 언급된 것처럼 useReducer는 상태(state)를 관리하고 업데이트하는 useState를 대체할 수 있는 Hook이다. useState와 다르게 useReducer는 한 컴포넌트 내에서 상태(state)를 업데이트하는 로직 부분을 그 컴포넌트로부터 분리되는 것을 가능하게 함으로써 코드의 최적화를 이루게 해 준다. 좀 더 복잡한 상태관리가 필요한 경우 useReducer를 사용할 수 있다. useReducer는 이전 상태와 action을 합쳐 새로운 state를 만드는 조작을 말한다. 콜백 대신..
목차 React.memo? 구조 [React.memo?] React.memo는 고차 컴포넌트(HOC : High Order Component)이다. 컴포넌트가 동일한 props로 동일한 결과를 렌더링한다면 React.memo를 호출하고 결과를 메모이징(Memoizing) 하도록 래핑하여 경우에 따라 성능 향상을 누릴 수 있다. 즉 React는 컴포넌트를 렌더링 하지 않고 마지막으로 렌더링된 결과를 재사용한다. React.memo는 props 변화에만 영향을 준다. 필요한 상황에서만 리렌더링을 하도록 설정한다. 컴포넌트의 props 가 바뀌지 않았다면 리렌더링을 방지한다. props가 복잡한 객체인 경우 React.memo는 얕은 비교만 한다. 상태 관리 시 함수형 업데이트를 하면 최신 상태를 참조하기 때..
목차 useCallback이란? import 예시 코드 정리 [useCallback이란?] useCallback은 useMemo와 비슷하다. useMemo : 특정 결괏값을 재사용할 때 사용 useCallback : 특정 함수를 새로 만들지 않고 새로 사용 useCallback을 사용하지 않는 함수들은 컴포넌트가 리렌더링 될 때마다 새로 만들어진다. 함수를 새로 만드는 것은 메모리, cpu가 리소스를 많이 차지하지는 것은 아니다. 함수를 새로 선언한다고 해서 그 자체만으로 큰 부하가 생기지 않는다. 한번 만든 함수를 재사용할 수 있을 때 재사용하는 것이 좋다. 나중에 컴포넌트들이 props가 바뀌지 않는다면 Virtual DOM에 리렌더링 조차 안 하게 할 수 있다. 만약 props가 바뀌지 않았다면 V..
목차 State란? Lifecycle이란? 예시코드 [State란?] state는 상태라는 뜻을 가지고 있다. 리액트에서의 state는 리액트 Component의 상태를 의미한다. 상태라는 단어가 정상, 비정상을 나타내는 것이라기보다 리액트 Component의 데이터라는 의미가 더 가깝다. 리액트에서의 State : React Component의 변경 가능한 데이터 이 state는 사전에 미리 정해진 것이 아니라 React Component를 개발하는 각 개발자가 직접 정의해서 사용한다. 자바스크립트에서는 변수를 사용한다. 리액트에서는 상태(state)를 사용한다고 생각하면 이해하기 쉽다. State를 정의할 때 중요한 점은 꼭 렌더링이나. 데이터 흐름에 사용되는 것만 state에 사용해야 한다. Sta..
목차 props란? 여러 개의 props 비구조화 할당 defaultProps로 기본값 설정 props.children https://devyihyun.tistory.com/171 [React] 리액트 props / props란? 목차 props란? props 특징 props 사용법 [props란?] props(properties) : 어떠한 값을 컴포넌트에게 전달해줘야할 때 props를 사용한다. Component에게 전달되는 props는 파라미터를 통하여 조회할 수 있다. props는 p devyihyun.tistory.com [props란?] props (properties) : 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용한다. // Tutorial.js // import Reac..
Component를 만들 때는 두 가지 방법으로 만들수 있다. Function Component Class Component React Component를 만들기 위해 터미널에서 yarn start명령어를 실행한다. $ yarn start // 또는 $ npm run start src 디렉터리에서 새로운 파일을 만들었다. import React from 'react'; : 리액트 컴포넌트를 만들 때 꼭 써야 한다. '리액트를 불러와서 사용하겠다.'라는 의미이다. import React from "react"; 함수형태로 컴포넌트를 만들기 위해서는 function 키워드를 사용한다. Tutorial이라는 컴포넌트를 만들었다. 리액트 컴포넌트에서는 XML 형식의 값을 반환해줄 수 있다. 이것을 JSX라고 부..