carrots-day

React props, state 둘다 react 데이터 핸들링 javascript 객체로 key, value 형태를 띄며 데이터 원 주인이 누구인가에 따라 구분된다. props는 부모로 부터 전달받은 데이터로 외부에서 주입되는 객체다. 한마디로 위에서 아래로 내려오는 구조며 변경이 불가능하다. state는 각 Component가 소유하는 영역으로 내부에서 사용되는 데이터 객체다. 👽 궁극적으로 함수의 파라미터(props)와 함수 내 지역변수(state) 차이로 이해하면 된다. 그리고 기본적으로 Component의 화면은 함수 내 지역변수로 인해 제어된다. props 부모 Component로 부터 전달받은 데이터 객체 최초 렌더 이후 자동 리렌더링 되지 않음 (생명주기 메소드 사용해야됨) 읽기전용 (데이..

React Component React의 컴포넌트는 앱을 구성하는 화면을 별개의 모듈로 나눈 단위로 Javascript와 JSX로 구성된 모듈을 반환하여 화면을 구축한다. React 앱을 구현하는데 있어 가장 기본적인 단위, 컴포넌트다. 컴포넌트의 핵심은 기능의 모듈화와 재사용성에 있다. 기능을 모듈화하여 관리포인트를 통일화하여 유지보수성을 증대시킬 수 있고, 모듈 형태이기 때문에 필요한 곳에 레고처럼 끼워넣어 사용할 수 있다. 이것이 React 앱을 구현하는 가장 기본적인 방법이다. CRA를 통해 React app을 만들면 App.js가 있다. App.js도 App이라는 컴포넌트를 return하는 형태로 되어있다. App은 모든 Component의 부모 컴포넌트다. Component의 선언방식 Clas..

React 디자인 패턴 React의 Component, 상태관리에 대한 글을 쓰기 전에 Flux 패턴, 즉 단방향 바인딩 디자인 패턴에 대한 내용을 이해해야 할 필요를 느낀다. 데이터 추적이 힘든 MVC 한계를 극복하기 위한 대안으로 제시된 Flux와 MVC 패턴의 문제, Flux 패턴의 필요성에 대해 알아보자 MVC 패턴 먼저 MVC패턴의 아키텍쳐에 대해 알아보자. 먼저 MVC 패턴은 Controller, Model, View로 프로세스를 분리하여 데이터의 CRUD를 제어하는 디자인 패턴이다. 그림에서 보듯 Controller로 요청을 받고, 내부 비즈니스 로직 수행 후 결과 데이터(Model)을 View로 전달한다. 해당 View를 통해 사용자에게 제공되며 View를 통해 데이터를 입력하면 View ..

JSX JSX(Javascirpt XML)는 React에서 사용하는 XML과 Javascript를 혼용하는 문법이다. React에서는 UI와 렌더링 로직을 결합하여 구현할 수 있는 언어를 지원한다. 바로 JSX다. React 입문시 러닝커브에 꼭 거론되는 녀석인데 요약하자면 React 전용 문법이다. 근데 솔직히 HTML, XML, Javascript를 어느정도 다룰 줄 안다면 대충 코드만 봐도 사이즈나온다. 예시 (App.js) 이전 포스팅에서 만든 React App을 열어보면 App.js가 있다. main Component에 해당하는 소스다. CRA를 통해 프로젝트를 생성하면 기본적으로 App.js가 생성된다. 모든 Component의 시작점이 되는 부분이다. 언뜻 보기엔 일반 HTML와 비슷해보이지..

React 시작 React를 사용하기 위해선 많은 사전 지식을 필요로 한다. 일단 필수적으로 필요로 하는 지식만 추리면 다음과 같다. Javascript HTML Webpack/babel nodeJS 이것 말고도 JSX, ES6 문법, 기타 라이브러리 (axios, redux, router, react hooks) 사용법 등 많은 사전 지식을 필요로 한다. 하지만 React에서는 create-react-app 이라는 모듈을 통해 간편하게 React 앱 구성을 로드할 수 있다. CRA (create-react-app) 페이스북 (Facebook) 에서 제공하는 React load CLI 우리 귀욤뽀짥 개발자들은 새로운 개발 환경에 접근하기 위해 필요로 하는 선수지식 때문에 본질에서 멀어지게 되는 일이 다반..

React React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다. 프론트엔드 취업요건 1위, React다. React는 Facebook 재단에서 개발한 컴포넌트 선언형 라이브러리로 SPA나, 모바일 앱 개발에 사용된다. 이게 무슨 말이냐하면 반복되는 기능이나 콘텐츠들을 컴포넌트 단위로 분리해 레고를 조립하듯 맞는 부분에 끼워서 사용하는 방식을 말한다. 이러한 특성이 SPA 개발 형태를 지니게 해준다. React 특징 선언적 프로그래밍 구조 : 명령형과 다르게 최종목표에 대한 프로그래밍 구조를 띈다. 굉장히 가시적이고 결과론적인 개발 방식을 사용한다. Co..