Dog foot print

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 프로..

C-R-A 란 create-react-app node module 의 약자로 리액트 프로젝트를 쉽게 만들 수 있게 필요한 모듈혹은 설정을 포함하는 보일러 플레이트이다.( C-R-A 가 없다면 우리는 바벨, eslint, 웹팩등을 직접 하나하나 설치하고 해당 파일을 일일히 설정 해주어야 할 것이다. ) 또한 C-R-A 는 페이스북에서 직접 관리하고 있으니 꾸준히 업데이트되는 장점도 있다. C-R-A의 설치 먼저 노드가 global로 설치가 되지 않았다면 노드를 먼저 설치한다. https://nodejs.org/en/ 다음 본인의 node 패키지 환경에 따라 터미널에 다음과 같이 작성 한다. npm을 사용하는 경우 npm install -g create-react-app yarn을 사용하는 경우 yarn a..

나는 리액트를 접할때 유명한 리액트 블로거인 벨로퍼트님의 책을 보면서 create-react-app 을 사용해서 손 쉽게 리액트 개발환경을 구축하는 것을 먼저 배웠다. 리액트 책을 볼 때 웹팩에 대해서 일정부분 설명이 있었으나 곧 이어 sass와 css_module을 사용을 하며 나에게는 웹팩은 sass와 css_module을 사용할때 만 건들고 더 이상은 건들지 않아도 되겠다는 개념으로 자리잡게 되었다. 그러나 오늘 채용공고에서 웹팩과 바벨의 이해가 있는 사람을 우대하는 것을 보고 집에가는 길에 웹팩에 관한 글을 읽게 되었다. 내용은 결국 여러 모듈화된 파일들을 하나의 번들파일로 만들어 이를 배포하게 해주는 것이였는데 중요한점은 "javascript외 다른 지원 파일들을 import 했을 때 사용하는 ..