IT/React21 클래스형 컴포넌트 컴포넌트 : 함수형, 클래스형 컴포넌트 2가지 존재 클래스형 컴포넌트 클래스형 컴포넌트와 함수형 컴포넌트의 역할은 같다. 클래스형 컴포넌트의 경후 state 기능 및 라이프 사이클 기능과 임의 메서드를 정의 할 수 있다. 반드시 render 함수가 필요하며, 그안에서 보여주어야 할 JSX를 반환 해주어야 한다. 함수형 컴포넌트 장점 클래스형 컴포넌트보다 선언하기 편하다. 메모리 자원을 클래스형 컴포넌트에 비해 덜 사용한다. 프로젝트 완성하여 빌드 후 배포시에도 함수형컴포넌트를 사용하는 것이 파일 크기가 더 작다. (함수형 컴포넌트와 클래스형 컴포넌트는 성능과 파일 크기 면서에 사실상 별 차이가 없다.) 단점 state와 라이프 사이클 API의 사용이 불가능 하다. (v16.8 이후 Hooks를 통해 조금.. 2019. 10. 27. JSX JSX : 자바스크립트의 확장 문법이며 XML과 매우 유사하게 생겼다. 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. function App() { return ( Hello backgroundColor import React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { const name = '리액트'; const style = { //background-color는 backgroundColor 카멜 표기법 backgroundColor : 'black', color: 'aqua', fontSize: '48px', //fon.. 2019. 10. 24. 코드 import React from 'react'; 리액트를 불러와서 사용할 수 있게 만들어 준다. 리액트 프로젝트를 만들 때에는 node_modules라는 디렉토리도 함께 생성되며, 프로젝트 생성 과정에서 node_modules 디렉터리에 react 모듈이 설치 된다. import를 통해 리액트를 불러오게 된다. 모듈을 불러와서 사용하는 것은 브라우저에 없는 기능이며 이는 Node.js에서 지원하는 기능이다. Node.js에서는 import가 아닌 require라는 구문으로 패키지를 불러온다. 이러한 기능을 브라우저에서 사용하기 위해서 번들러를 사용한다. 번들러는 파일을 연결해 준다. 주로 사용하는 번들러는 WebPack이다. 번들러 도구를 사용하면 모듈을 불러왔을 때, 불러온 모듈을 모두 합쳐서 하나의 .. 2019. 10. 24. react 설정과 JSX 특징 Bable : ECMA6를 5로 변환시켜 호환을 지원해준다. react : component reactDOM : rendering 15이상부터 2가지 모두 필요 class ES6에서 새로 추가된 문법 class 선언 class Polygon { constructor(height, width) { this.height = height; this.width = width; } } static과 상속도 가능하다. 모든 React.Component는 render() 메소드를 가지고 있다. 컴포넌트가 어떻게 생길지 정의해준다. JSX 형식 React JSX는 XML 같은 문법을 native JavaScript로 변경해준다. ""로 감싸지 않는다. ()를 사용하지 않아도 오류 발생하지 않으나 가독성을 위해서 사용 .. 2019. 10. 21. 이전 1 2 3 4 5 6 다음