React (28) 썸네일형 리스트형 리액트 라이프 사이클 리액트에는 각 컴포넌트가 mounting, updating, unmounting 될 때 자동적으로 호출되는 메소드들이 있다. 이를 라이프 사이클 메소드라고 부른다. Mounting 1. constructor 컴포넌트가 생성될 때 제일 먼저 호출되는 함수다. constructor를 쓰려면 먼저 super(props);를 호출해야 한다. 이로써 React.Component를 상속하게 된다. state 값을 초기화하는 곳이기도 하다. constructor(props) { super(props); this.state = { color: 'red' }; } 2. getDerivedStateFromProps render 메소드 바로 직전에 호출 된다. props에서 받은 값으로 state를 초기화하기 좋은 위치다... 리액트 state state를 활용하려면 ES6 방식으로 클래스를 정의해야 한다. class Clock extends React.Component { constructor(props) { // 생성자 규칙 super(props); this.state = { date: new Date() }; // constructor 안에서만 이렇게 정의할 수 있다. } render() { return ( { this.state.date.toLocaleTimeString() } // this.state를 사용한다. ); } } ReactDOM.render(, document.getElementById('root')); state를 변경하려면 setState() 메소드를 써야 한다. 위의 경우 this.setState({ date: new.. 리액트 기본, 컴포넌트, props 1. JSX 리액트 개발 환경에서 태그가 나오면 JSX가 자동으로 객체 형태로 바꿔준다. const element = Hello; 위는 아래와 동일하다. const element = { type: 'h1', props: { className: 'greeting', // 리액트에서는 class 대신 className을 쓴다. children: 'Hello' } } 2. Rendering Elements 리엑트는 기본적으로 특정 엘리먼트에 추가하는 방식으로 사용한다. const element = Hello; ReactDOM.render(element, document.getElementById('root')); 3. Components and Props 리엑트는 편의성과 재사용을 위해서 보통 컴포넌트를 활용.. 리액트에서 자식을 포함한 엘리먼트 추가 방법 counter.jsx import React, { Component } from 'react'; class Counter extends Component { render() { // return되는 부모 엘리먼트는 하나만 올 수 있고 // 로 감싸주면 자식들을 넣을 수 있다. // 는 렌더링시 포함되지 않는다. return ( Hello World Button ); } } export default Counter; 비교 : https://thinkforthink.tistory.com/126 참고 : https://youtu.be/Ke90Tje7VS0?t=1902 이전 1 2 3 4 다음