리액트5 LifeCycle API LifeCycle은 리액트에서 컴포넌트를 만들어낼 때 중요하다. 컴포넌트가 브라우저에서 나타날 때(Mounting), 업데이트될 때(Updating : 컴포넌트의 props나 state가 바뀔 때), 사라질 때(Unmounting) 등에 사용된다. Mounting Updating Unmounting constructor, getDerivedStateFromProps, componentDidMount getDerivedStateFromProps, shouldComponentUpdate, getSnapshotBeforeUpdate, componentDidUpdate componentWillUnmount constructor 생성자 함수이다. 우리가 만든 컴포넌트가 처음 브라우저에 나타날 때 만들어지는 과정에.. 2021. 1. 30. Props 와 State Props와 State는 리액트에서 정말 중요한 개념이다. 리액트에서 데이터를 다룰 때 사용된다. Props는 부모 컴포넌트가 자식 컴포넌트한테 값을 전달할 때 사용된다. 값을 직접 바꿀 수는 없고 부모 컴포넌트로부터 받아오기만 할 수 있다. State는 컴포넌트 내부에서 선언하며 setState로 내부에서 값을 변경할 수 있다. Props import React, { Component } from 'react'; class ChildClass extends Component { render(){ return( 이 컴포넌트는 {this.props.name} 컴포넌트 입니다. ); } } export default ChildClass; import React, { Component } from 'react.. 2021. 1. 27. JSX 리액트는 JSX를 사용해야 한다. JSX 자바스크립트를 확장한 문법이다. 자바스크립트의 모든 기능이 포함되어 있다. 1. JSX에서 태그는 꼭 닫혀야 한다. 아래의 예제에서 input에 close가 되지 않는다면 에러가 발생한다. import React, { Component } from 'react'; class App extends Component { render() { return( ); } } export default App; 2. 두 개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸 져있어야 한다. Fragment를 이용하면 된다. 를 사용해도 되지만 Fragment를 사용하는 것이 더 효율적이다. import React, { Component, Fragment } from 'react';.. 2021. 1. 25. Webpack과 Babel 리액트를 사용하려면 Webpack 과 Babel이라는 것을 알아야한다. Webpack Webpack은 오픈소스 자바스크립트 모듈 번들러이다. 주로 자바스크립트를 위한 모듈 번들러지만 호환 플러그인을 포함하는 경우 HTML, CSS, IMAGE와 같은 프론트엔드 자산들을 변환할 수 있다. Webpack은 의존성이 있는 모듈을 취하여 해당 모듈을 대표하는 정적 자산들을 생산한다. HTML 파일에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식을 모듈 번들링이라고 한다. 즉, 필요한 다수의 자바스크립트 파일을 하나의 자바스크립트 파일로 만들어주는 것을 Webpack이라고 한다. 이전에는 페이지마다 html을 요청해서 뿌려주는 방식이었지만 요즘은 SPA라는 하나의 html 페이지에 여러.. 2021. 1. 22. React란? 리액트는 프론트엔드 라이브러리이다. 더보기 프론트엔드 라이브러리는 다양한 유저 인터페이스와 인터랙션을 제공할 때 이를 수월하게 해주는 것이다. HTML, CSS로 정적인 '페이지'로 동작시킬 수 있으며, Javascript를 더해주면 동적인 '페이지'로 동작시킬 수 있다. 그럼에도 불구하고 React나 Vue의 도움으로 *DOM 관리와 상태 값 업데이트 관리를 최소화하고 오로지 기능 개발과 사용자 인터페이스 구현해 웹 '애플리케이션'으로 개발에 집중할 수 있도록 해준다. * DOM(Document Object Model) : 문서 객체 모델이다. 웹 페이지에 대한 프로그래밍 인터페이스이며 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있는 API를 제공한다. 즉 .. 2021. 1. 21. 이전 1 다음
