오픈소스 썸네일형 리스트형 [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 명령어를 통해 기초적인 .. 더보기 [Node] React 정리(7) - SetState와 jQuery 사용하여 렌더링 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 컴포넌트에서 동적인 메소드인 setState를 이용하여 숫자가 변경되는 예제 및 버튼을 눌렀을 때 초기화 하는 예제를 담았습니다. 진부한 예제이지만 setState의 기초와 사용법에 대해 아는 것이 아주 중요한 만큼 바로 시작해보도록 하겠습니다. # Contents 의존 라이브러리 설치 코드 작성 및 테스트 # 의존 라이브러리 설치 먼저 의존하는 라이브러리를 설치하는 것이 당연지사입니다. 현재 문서부터 JSX 문법을 이용하여 리액트를 시작할 것.. 더보기 [Node] React에서 jQuery 사용 방법 Javscript에서는 실제로 jquery가 너무 많이 필요하지 않으며 React에서 많이 지원하기 때문에 자주 사용하진 않습니다. 그러나 여전히 이 거대한 jQuery 플러그인 지원 때문에 jQuery를 완전히 피할 수는 없습니다. 이 때문에 jquery를 거의 느끼지 못할 수도 있습니다. jQuery를 리액트 프로젝트에 적용시키는 방법을 알아보도록 하겠습니다. # Contents react에서 jQuery 적용 # react에서 jQuery 적용 먼저 jQuery 라이브러리 혹은 패키지를 설치하도록 하겠습니다. 리액트를 편하게 사용하기 위해서는 라이브러리 CDN 설치보다는 npm 설치를 권합니다. npm install --save jquery 그런 다음 jquery 패키지의 $ 로 jquery를 가져.. 더보기 [Node] Node Express, React 프록시 연동 Express 서버와 React 클라이언트의 개발을 통해 서로를 연결하려고 합니다. 각각의 특징들과 장점들을 대부분 배우셨을거라고 생각합니다. 서버와 클라이언트가 분리됨으로써 협업을 하기 좋은 구성이 되고 맡은 바 임무에 최고의 효율을 낼 수 있는 프로젝트라고 생각합니다. 리액트는 더불어 리액트 네이티브라는 것이 존재하기 때문에 리액트의 문법을 알게 되면 iOS와 안드로이드 개발에서 도움이 많이 됩니다. 따라서 본 프로젝트를 통해 리액트를 좀 더 알아보고, 서버와 클라이언트를 분리함으로써 유지보수가 쉬운 프로젝트를 만들고자 하는 것이 목표입니다. 먼저 처음 프로젝트를 생성하는 것을 시작으로 하겠습니다. # Contents Express 생성 리액트 생성 연결 # Express 생성 우선 프로젝트의 의존성.. 더보기 [Node] React 정리(6) - 서버사이드 렌더링 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 이 문서는 어떠한 리액트의 이론을 다루는 것이 아닙니다. 또한 현재 정리하려는 것은 여러분이 필요한 JSX 부분이 아닐 수 있음을 알려드립니다. 본 과정에서는 차례대로 난이도가 증가하는 정리를 하지 않았습니다. 필요한 부분만을 사용하거나 훑어보는 용도로 사용하시기 바랍니다. 리액트로 만든 애플리케이션을 서버 사이드 랜더링하는 방법을 소개하고자 합니다. 먼저 적용할 코드는 아래와 같습니다. GitHub - PacktPublishing/Node.j.. 더보기 [Node] React 정리(5) - react-router-dom 에서 존재하지 않는 페이지 커스터마이징 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 이 문서는 어떠한 리액트의 이론을 다루는 것이 아닙니다. 또한 현재 정리하려는 것은 여러분이 필요한 JSX 부분이 아닐 수 있음을 알려드립니다. 본 과정에서는 차례대로 난이도가 증가하는 정리를 하지 않았습니다. 필요한 부분만을 사용하거나 훑어보는 용도로 사용하시기 바랍니다. 리액트로 존재 하지 않는 페이징 처리를 위한 준비는 아래와 같습니다. 먼저 라우터가 설정되어 있어야 합니다. 기본적인 라우터는 react-router-dom을 이용하여 Sw.. 더보기 이전 1 2 3 4 5 6 7 ··· 10 다음
