dmchoi

클래스형 컴포넌트에는 lifecyle 메서드라는 것이 존재한다. 컴포넌트 안에 어떤 변화가 있었을때, 처음에 로딩될때, 컴포넌트가 해체될때 등 함수나 코드를 실행할 수 있는 기능이다. 대표적으로 다음과 같은 메서드들이 존재한다. componentDidUpdate : 컴포넌트가 업데이트될 때 실행 componentDidMount : 컴포넌트가 처음 로딩될 때 실행 componentWillUnmount : 컴포넌트가 해체되기 직전에 실행 import React, {Component} from 'react'; export default class App extends Component { componentDidMount(){ //code this } componentDidUpdate(){ //code this..

리액트에서 컴포넌트를 선언하는 방식에는 두 가지가 있다. 클래스형 컴포넌트와 함수형 컴포넌트 과거에는 클래스형 컴포넌트를 주로 사용했지만, 2019년 v16.8부터 함수형 컴포넌트에 리액트 훅(Hook)을 지원, 현재 리액트 공식 문서에서는 함수형 컴포넌트 사용을 권장하고 있다. 하지만, 아직 사용하고 있는 곳들이 있어 유지보수를 위해 두 가지 방식 모두 알고는 있어야 한다. 클래스형 컴포넌트 기본적으로 함수형 컴포넌트와 동작은 같지만, 클래스형 컴포넌트는 보다 더 많은 기능을 제공해 주는 것이 함수형 컴포넌트와의 차이점이다. state를 이용해 상태를 나타내거나 component lifecyle에 정의된 메서드(componentWillMount(), componentDidMount() 등)을 이용해 원..

Mode 변경 TOC 컴포넌트 아래에 create, update, delete 구현하기 create, update는 눌렀을때 특정 페이지로 이동해서 실행되게 하고 delete는 눌렀을때 페이지 이동 없이 실행되게 함 delete에 link를 사용하게 되면, 사용자들이 어떤 페이지를 방문할 때 페이지가 삭제될 수도 있는 큰 문제가 발생하기 때문에 페이지 개념이 아니라 버튼으로 구현 components 디렉토리에 Control.js 생성 App.js Control.js import React, { Component } from 'react'; class Control extends Component { render() { return ( create update ); } } export default Con..

이벤트 state props 그리고 render 함수 props, state, event 가 서로 상호작용하여 애플리케이션의 역동성을 만듦 리액트에서 props나 state 값이 바뀌면 그 state를 가지고 있는 컴포넌트의 render 함수가 다시 호출되고 그 하위 컴포넌트들의 render 함수들도 다시 호출됨 (render 함수 : 어떤 html을 그릴것인가 결정하는 함수) 이벤트 설치 a 태그를 클릭하면 onClick에 설치된 함수가 실행되도록 함 {this.state.subject.title} function에 e라는 인자를 줌으로써 이벤트를 핸들링 할수 있게 해줌 e.preventDefault( ) : 이벤트가 발생한 태그가 기본적인 동작 방법을 하지 않게 만들어 줌 {this.state.sub..

※본 포스팅은 생활코딩님의 리액트 강의를 바탕으로 작성한 글입니다. 컴포넌트 만들기 HTML로 코드를 작성했을 때 WEB world wide web! HTML CSS JavaScript HTML HTML is Hyper Text Markup Language. 컴포넌트를 만드는 코드 class App extends Component { render() { return ( Hello, React! ) } } 리액트가 가지고 있는 컴포넌트라는 클래스를 상속해서 새로운 App라는 클래스를 만든다 그리고 그 클래스는 render라는 매서드를 가지고 있다. 위 HTML 코드를 React로 정리하면 class Subject extends Component { render() { return ( WEB world wi..

※본 포스팅은 생활코딩님의 리액트 강의를 바탕으로 작성한 글입니다. 리액트(React) Facebook에서 만든 자바스크립트 UI 라이브러리 웹사이트는 매우 빠른 속도로 복잡해지고 있다. 정보가 조금만 증가해도 그 정보를 표현하는 HTML 태그는 기하급수적으로 늘어남 리액트는 사용자 정의 태그를 만들어주는 여러가지 기술 사용자가 정의해서 태그를 만드는 것 -> 컴포넌트(Component) 리액트를 사용하면 1. 가독성을 높임 2. 재사용성이 높아짐 3. 유지보수가 편리해짐 리액트 개발환경의 종류 리액트 공식 홈페이지 React – A JavaScript library for building user interfaces A JavaScript library for building user interface..