Dog foot print

컴포넌트의 LIFE 3단계 컴포넌트의 생애를 크게 3단계로 구분짓자면 Mount,Update, Unmount로 나눌 수 있다. Mount는 컴포넌트가 처음 연결이 될 때 한번 일어난다. Update는 컴포넌트가 마운트되고 모델에 변화가 생겨 컴포넌트가 뷰를 다시 렌더하는 경우이다. 마지막 Unmount는 컴포넌트가 해제되어 더 이상 뷰를 보여주지 않게 될때 일어난다. Life-Cycle method 리액트에서는 위의 3단계를 더욱 잘개 쪼개어 생태주기 함수라는 것들을 만들어 컴포넌트에서 state와 props를 효과적으로 관리할 수 있고 각 단계에서 API를 호출하는 등 다양한 일을 할 수 있다. Constructor(props) 생성자는 컴포넌트가 최초 마운트 될 때 만나는 생태주기 함수로 컴포넌트의 ..

redux라는 것을 알기 전 FLUX패턴과 FLUX패턴이 왜 필요한지에 대하여 알 필요가 있다. UNIDIRECTION-DATA-FLOW 영어로 하니 무섭지만 한국어로 번역하면 단방향 데이터 흐름이다. 리액트는 각각의 컴포넌트가 state를 가지고 있고 상위컴포넌트가 하위 컴포넌트에 데이터를 전달해줄때 props 개념을 사용해서 전달한다. 그런데 다음과 같은 구조가 있다고 가정을 해보자 ArticleList컴포넌트 하위에 있는 comment에 글을 작성하고 추가하려면 현재 접속해있는 user의 정보가 필요하다 그러나 정보가 보관되어 있는 userStatus 컴포넌트는 comment와 다른 edge에 해당하고 있어 user정보를 현재 주지 못하고 있다. 그래서 comment컴포넌트와 userStatus를 ..

state 와 props란 ? 리액트는 모든 뷰의 단위가 컴포넌트라고 하였다. 각 컴포넌트는 상위 컴포넌트에서 하위 컴포넌트를 import 하여 연결 되어 있는 구조인데 import 되어 있는 하위컴포넌트에게 상위컴포넌트가 값을 전달 하여 하위컴포넌트에서 사용 할 수 있다. 이것이 바로 props이다. 그리고 각 컴포넌트는 스스로 state라는 값을 가질 수 있는데 이는 개별적인 컴포넌트에서 각기 다르게 상태를 가질 수 있다. state란 ? state는 각 컴포넌트가 가지고 있는 개별적인 상태값이다. 클래스형 컴포넌트를 작성할때는 해당 클래스 내부 맨 위쪽에 작성하는 것이 일반적이며 state는 객체이다. import React, { Component } from 'react' export defaul..

리액트에서 컴포넌트는 뷰의 단위이다. 우리가 리액트로 모든 것은 컴포넌트로 이루어져있으며 필요에 의해서 이 컴포넌트를 화면에서 제거 혹은 연결 하여 페이지를 구성한다. 컴포넌트는 함수형 컴포넌트 , 클래스형 컴포넌트를 가지는데 react-hook 이라는 라이브러리가 나오기전까지 함수형 컴포넌트는 스스로 상태를 가지지 못하여 잘 사용되지 못했지만 최근 함수형 프로그램의 우수성과 react-hook의 등장으로 인하여 많이 사용되고 있다. 해당 포스팅에서는 클래스형 컴포넌트와 함수형 컴포넌트의 작성 형태를 설명하고 컴포넌트의 life-cycle 같은 내용들은 추후 따로 포스팅 할 예정이다. 클래스형 컴포넌트 클래스형 컴포넌트는 React.component 를 상속받아서 사용하여야 한다. component 프로..