본문 바로가기

Web Front-End/React

(26)
React 함수형 컴포넌트, 클래스형 컴포넌트, React에서 컴포넌트를 선언하는 방법은 함수형 컴포넌트로 선언하는 방법과 클래스형 컴포넌트로 선언하는 방법 2가지가 존재한다. 리액트 공식 매뉴얼에서는 컴포넌트를 새로 작성할 때 함수형 컴포넌트와 Hooks를 사용하도록 권장 하고 있다. 그렇다고 클래스형 컴포넌트가 사라지는 건아니라고 한다.. 그럼 뭘써야하는겨?? 간단한 컴포넌트는 함수형으로 선언하고 좀 복잡한건 클래스형으로 해야할까? 그건아닌듯.. 그렇게 따지면 함수형으로도 충분히 구현가능.. ==> 여기서 정의 내린다.... 컴포넌트는 함수형으로 하는게 좋다. 이유는 훅이 주는 장점이 매우 크고 무엇보다, 리액트팀에서 훅과 관련된 기능 개발을 적극적으로 하고 있기 때문이다. 1. 함수형 컴포넌트 // 함수형 컴포넌트 예제 import React f..
React Project 생성 1. Yarn을 이용하는 방법 프로젝트 생성 명령어: yarn create react-app 2. npm을 이용하는 방법 프로젝트 생성 명령어: npm init react-app 위 두개의 옵션 명령어를 통해서 프로젝트를 위한 웹팩, 바벨 및 설정 과정을 생략하고 react 프로젝트를 쉽게 생성할 수 있다. 3. 실행방법 생성된 디렉토리로 이동 후 yarn start 또는 npm start 명령어를 통해서 react 앱을 실행시킨다. 생성된 프로젝트에서 src/App.js를 보면 function 키워드를 사용하여 컴포넌트를 만드는 것을 볼 수 있는데 이를 그 유명한 "함수형 컴포넌트"라고 불린다. 함수에서 내용을 반환하고 있는 내용을 나타낸다. HTML 같지만 이는 문자열 템플릿도 아닌 JSX라고 불리운..