오픈소스/노드 썸네일형 리스트형 [Node] React 정리(15) - useReducer를 사용한 코드 예제 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 13번째 노트 정리 페이지에서 예제로 테스트 한 사용자 페이지는 useState로 구성되어 있었습니다. 그 예제를 useReducer 로 변경하였습니다. 아래 코드는 13번째 노트 정리 한 코드 예제입니다. 천천히 따라와 주시기 바랍니다. 현재 정리부터는 소스코드를 제공할 예정입니다. 제공하는 소스코드를 이용하여 따라하실 수 있고 개념을 확실히 잡을 꺼 같아서 올리게 되었습니다. 소스코드 자료는 아래 링크를 참고해주세요. https://gith.. 더보기 [Node] React 정리(14) - useReducer를 사용하여 상태 업데이트 분리 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 전 시간에서는 useCallback 과 같이 React.memo를 사용하여 컴포넌트 리렌더링을 방지해보았습니다. 오늘은 useReducer를 사용하여 상태 업데이트 로직을 분리하는 과정을 해보겠습니다. 현재 정리부터는 소스코드를 제공할 예정입니다. 제공하는 소스코드를 이용하여 따라하실 수 있고 개념을 확실히 잡을 꺼 같아서 올리게 되었습니다. 소스코드 자료는 아래 링크를 참고해주세요. https://github.com/libtv/React_No.. 더보기 [Node] React 정리(13) - React.memo을 사용하여 컴포넌트 리렌더링 방지 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 전 시간에서는 useCallback 과 같이 React.memo를 사용하여 컴포넌트 리렌더링을 방지해보았습니다. useCallback과 React.memo를 같이 이용하는 예제를 이번에도 해볼 예정입니다. 내용은 전시간이랑 똑같지만 한번 더 복습하는 방향으로 설정하였습니다. 현재 정리부터는 소스코드를 제공할 예정입니다. 제공하는 소스코드를 이용하여 따라하실 수 있고 개념을 확실히 잡을 꺼 같아서 올리게 되었습니다. 소스코드 자료는 아래 링크를 .. 더보기 [Node] React 정리(12) - useCallback을 사용하여 성능 최적화 하기 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 컴포넌트에서 useCallback를 이용하여 성능 최적화를 하는 예제를 담았습니다. 진부한 예제이지만 useCallback의 기초와 사용법 에 대해 배워보도록 합시다. # Contents 사용하는 이유 useCallback기초와 사용법 # 사용하는 이유 useCallback 을 사용하는 이유를 먼저 설명하도록 하겠습니다. 괜히 복잡한 기능들만 배우면서 왜 사용하는지 모르면서 사용하는 것과 잘 알고 사용하는 것의 차이는 하늘과 땅이라고 생각합니다.. 더보기 [Node] React 정리(11) - useMemo를 사용하여 연산한 값 재사용하기 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 컴포넌트에서 useMemo를 이용하여 연산한 값을 재사용 하는 예제를 담았습니다. 진부한 예제이지만 useMemo의 기초와 사용법 에 대해 배워보도록 합시다. # Contents 사용하는 이유 useMemo 기초와 사용법 # 사용하는 이유 이번에는 성능 최적화를 위하여 연산된 값을 useMemo라는 Hook 을 사용하여 재사용하는 방법을 알아보도록 하겠습니다. App 컴포넌트에서 다음과 같이 countActiveUsers 라는 함수를 만들어서,.. 더보기 [Node] React 정리(10) - useEffect를 사용하여 마운트/언마운트/업데이트 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 클래스 컴포넌트의 경우에는 저번에 배웠던 리액트의 생명주기의 메소드를 호출하여 Mount 될 때의 과정들을 구현할 수 있었습니다. 하지만 함수 컴포넌트의 경우에는 다음과 같은 useEffect 함수를 호출하여 리액트 사이클을 구현할 수 있습니다. 진부한 예제이지만 useEffect의 기초와 사용법 에 대해 배워보도록 합시다. # Contents useEffect 기초와 사용법 # useEffect 기초와 사용법 useEffect를 사용하기 위해.. 더보기 [Node] React 정리(9) - useState를 사용하여 배열 랜더링 및 추가/삭제 예제 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 컴포넌트에서 useState를 이용하여 배열을 랜더링 하는 예제를 담았습니다. 진부한 예제이지만 useState의 기초와 사용법 에 대해 배워보도록 합시다. # Contents 코드 작성 및 테스트 # 코드 작성 및 테스트 리액트의 모든 코드는 src에서 정의할 수 있습니다. 따라서 코드를 수정하거나 추가할 때에는 src 폴더 안에 코드를 작성하거나 수정 하시면 되겠습니다. 먼저 App.js 코드는 아래와 같습니다. import "./App.c.. 더보기 [Node] React 정리(8) - useRef 를 이용하여 특정 DOM 포커스하기 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 컴포넌트에서 useRef를 이용하여 이름과 닉네임을 초기화 하는 과정에서 포커스 하는 예제를 담았습니다. 진부한 예제이지만 useRef의 기초와 사용법 에 대해 배워보도록 합시다. # Contents 의존 라이브러리 설치 코드 작성 및 테스트 # 의존 라이브러리 설치 먼저 의존하는 라이브러리를 설치하는 것이 당연지사입니다. 현재 문서부터 JSX 문법을 이용하여 리액트를 시작할 것이기 때문에 create-react-app 명령어를 통해 기초적인 .. 더보기 이전 1 2 3 4 5 6 7 다음
