맨동이

Component Lifecycle 이번에는 16.3 버전 이상의 변경된 내용에 대해 살펴보겠습니다. 라이프사이클 변경 사항(v16.3 이상) constructor componentWillMount => getDerivedStateFromProps render componentDidMount componentWillReceiveProps => getDerivedStateFromProps shouldComponentUpdate render componentWillUpdate => getSnapshotBeforeUpdate DOM에 적용 componentDidUpdate componentWillUnmount 1. getDerivedStateFromProps getDerivedStateFromProps는 최초..

Component Lifecycle 해당 내용은 16.3 버전 이전의 내용을 다루고 있습니다. 라이프사이클 (v16.3 이전) 1. Component 생성 및 마운트 constructor componentWillMount render(최초 렌더) componentDidMount 1.1 코드 예시 class App extends React.Component { state = { age: 25, }; constructor(props) { super(props); console.log("constructor", props); } render() { console.log("render"); return ( Hello {this.props.name} - {this.state.age} ); } componentWi..

React Router로 라우팅 하기 SPA는 index.html 파일에 div 엘리먼트만 하나 두고, 자바스크립트로 모든 부분을 동적으로 랜더링하는 구조입니다. 그리고 화면의 전체 또는 일부를 브라우저에서 발생하는 이벤트에 따라서 동적으로 갱신할 수 있기 때문에 인터랙티브 한 사용자 경험을 제공할 수 있습니다. 별도의 라이브러리 없이 React로 간단하게 라우팅을 구현할 수 있습니다. 예를 들어, 다음 코드 처럼 현재 어떤 컴포넌트가 랜더링되야 하는지 상태로 관리할 수 있습니다. 내의 특정 메뉴 버튼을 클릭하면 상응하는 컴포넌트로 comp 상태가 바뀌기 때문에 화면에서 부분이 갱신되게 됩니다. import React, { useState } from "react"; import Home from "./..

JSX란? 1. 특징 JSX는 JavaScript의 XML입니다. JavaScript 문법의 확장판으로 리액트에서 요소를 제공합니다. 컴파일에 최적화 확장자는 jsx 또는 js 컴파일 과정이 필요하므로 변환 과정에서 오류가 있다면 빌드 시 오류 발생 2. 사용 이유 1. React.createElement와 JSX를 비교하였을 때, JSX의 가독성이 훨씬 뛰어납니다. 2. Babel과 같은 컴파일 과정에서 문법적인 오류를 인지하기 쉽습니다. 3. 변환 과정 JSX의 문법으로 작성된 코드는 순수한 JavaScript로 컴파일하여 사용할 수 있습니다. 이를 가능하도록 하는 것이 바로 Babel입니다. 4. 사용 방법 4.1 CDN CDN을 통해, 별도의 설치 없이 Babel 사용이 가능합니다. 4.2 작성법..

1. Props, State Props는 컴포넌트 외부에서 컴포넌트에게 주는 데이터이고, State는 컴포넌트 내부에서 변경할 수 있는 데이터입니다. 둘 중 하나라도 변경되면 렌더링이 일어납니다. render 함수는 Props와 State를 바탕으로 컴포넌트를 그립니다. 그리고 Props와 State가 변경이 되면, 컴포넌트를 다시 그리게 됩니다. 컴포넌트를 그리는 방법을 기술하는 함수가 바로 render 함수입니다. 2. Props 2.1 Props 사용 예제 (1) // {message: 'Hello!!!'} function Component(props) { return ( {props.message} ); } ReactDOM.render( , document.querySelector('#root')..