React Developer Tools 크롬 확장 프로그램 크롬 확장 프로그램을 통해 React 작업 시, 개발자 도구를 통해 효율적인 작업을 처리할 수 있습니다. 관련 프로그램 크롬 React Developer Tools [바로가기] 을 설치합니다. React Developer Tools 구동 F12 키를 눌러 개발자 도구툴에서 'Componets'와 'Profiler' 를 확인합니다. 조금 더 쾌적하게 작업 하실 수 있습니다 :D
모든 컴포넌트는 생명주기 메서드를 가지며, 크게 마운트(mount) / 업데이트(update) / 언마운트(unmount) 의 개념으로 구분됩니다. 아래 생명주기 도표를 참고하면서, 생명주기 메서드에 대해서 알아보겠습니다. render( ) 클래스 컴포넌트 생성 시, 필수로 생성해야 하는 메서드로 호출될때마다 동일한 결과를 반환해야 하며, 브라우저와 직접적인 상호작용을 하지 않습니다. constructor( ) 생성자로 컴포넌트 생성시 처음 실행됩니다. 단, 바인딩, state 초기화 작업이 없다면, 생성하지 않아도 됩니다. ( * 메서드 생성 시, super(props)를 반드시 정의 해줘야 합니다.) getDerivedStateFromProps( ) 컴포넌트를 마운트할 때와 업데이트 할때 render..
Reactjs code snippets VS Code를 사용 중이라면, Reactjs code snippets 확장 프로그램을 통해 , 컴포넌트 생성을 쉽게 할 수 있다. rsc : 함수형 컴포넌트 코드 생성 설치 후, Component 파일 생성하여 에디터에 'rsc(함수형 컴포넌트)'를 입력한다. Component 파일명에 맞는 컴포넌트 코드가 자동으로 생성되는걸 확인할 수 있다. rcc : 클래스형 컴포넌트 코드 생성 설치 후, Component 파일 생성하여 에디터에 'rcc(함수형 컴포넌트)'를 입력한다. Component 파일명에 맞는 컴포넌트 코드가 자동으로 생성되는걸 확인할 수 있다.
1. nodejs 1.설치 # yum -y install nodejs 2. 버전확인 # node -v v10.24.0 2. yarn 1.yarn 설치 # npm install --global yarn 2.버전확인 # yarn --version 1.22.10 3. 프로젝트 생성 create-react-app 1. 리액트 프로젝트 생성 # yarn create react-app [프로젝트명] 예시> yarn create react-app hello-react yarn create v1.22.10 [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh packages... su..