state란 리액트에서 데이터를 다루는 대표적인 방법으로 props와 state가 있다. props는 부모 컴포넌트에서만 수정 가능하며 자식 컴포넌트는 읽기만 가능한 단방향 데이터 메커니즘이다. 반면 state는 컴포넌트 내부에서 변경 가능한데이터이다. 단어 그대로 상태값을 의미하는데 기존의 자바스크립트나 개발언어에서도 필요하다면 다양한 상태값을 선언하고 사용하였다. 하지만 리액트에서는 상태라는 개념은 가상돔 개념과 연결되면서 상태의 변경이 발생할 경우 UI를 리 랜더링 하게 되는 기준값이 되었다. 즉, state는 컴포넌트 내부에서 변경 가능한 값이며, 변경이 일어날 경우 화면이 리랜더링 되도록 하는 기준값이라는 것. 함수형 컴포넌트에서 state 사용하기 리액트 이전 버전에서는 클래스형 컴포넌트에서만..

Props란 리액트 공식 웹사이트에 따르면 props는 읽기전용으로 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 것이다. props는 property의 준말이며, 객체 형태로 자식 컴포넌트에 전달되는 데이터를 담고 있다. props는 전달하는 주체인 부모 컴포넌트가 결정하고 받아서 사용하는 자식 컴포넌트는 수정하거나 삭제 할수 없다. 그러기 위해선 state라는 개념이 필요하다. 즉, 리액트에서 단방향으로 데이터를 전달하는 매커니즘을 뜻한다. props 전달 /* 부모 컴포넌트 */ function App() { return ; } /* 자식 컴포넌트 */ function Hello(props) { return Hello, {props.name}!; }App 컴포넌트에서 Hello 컴포넌트를 불러..

JSX란 리액트 공식 웹사이트에 따르면 JSX란 JavaScript 확장 문법이다. React에서 UI를 만들기 위해 사용되는 문법으로 JSX 코드를 작성하면 웹팩의 로더(babel과 같은)를 통해 번들링되면서 일반적인 JavaScript 코드로 변환된다. 웹팩의 로더는 직접 설치하는 과정이 필요하지만 React 프로젝트 생성을 도와주는 CRA로 번거로운 작업을 대신 할 수 있다. React 프로젝트 생성 후 기본적으로 설정되어 있는 src/App.js를 살펴보자. function App(){ /* 생략 */ return ( Edit src//App.js and save to reload. Learn React ) } src/App.js는 현재 React 프로젝트에 App이란 컴포넌트를 생성하고 있다. ..

리액트 컴포넌트 컴포넌트란 무엇인가 w3school에 따르면 컴포넌트는 독립적이고 재사용 가능한 코드 조각이다. JavaScript의 함수(input, ouput)와 동일한 목적을 수행하지만 독립적으로 작동하고 HTML을 반환한다. 컴포넌트는 Props를 인풋으로, react엘리먼트를 아웃풋으로 반환한다. 컴포넌트 명칭은 반드시 대문자로 시작한다. 클래스형 컴포넌트 VS 함수형 컴포넌트 클래스형 컴포넌트 class Car extends React.Component { render() { return Hi, I am a Car! I was made by {this.props.company}; } } extends React.Component 구문과 rander 함수를 포함한다. 상태관리와 라이프사이클 기능..

CRA(Create React App) 이란 공식 사이트를 빌려 표현하자면 Set up a modern web app by running one command. 이라고 한다. 명령어 한줄로 프로젝트를 구성할 수 있다. 프로젝트 구성은 환경설정과의 싸움이다. Webpack, vite 등 모듈 번들...바벨...각종 설정파일... 처음 CRA를 보고 가장 먼저 생각난건 Spring Initializr 였다. 환경설정 싫어하는건 다들 비슷하다... CRA를 사용하면 리액트를 실행하기위해 필요한 모듈들을 설치해서 환경을 구성해주고 설치된 모듈들은 생성된 프로젝트 내의 node_modules 폴더 안에 저장된다. yarn 명령어, CRA로 리액트 프로젝트 생성하기 프로젝트 생성할 디렉토리로 이동한다. cd 디렉토..

React 리액트공식문서에서는 React를 사용자 인터페이스를 만들기 위한 JavaScript라이브러리 라고 소개하고 있다. SPA 기반 프른트앤드 개발 프레임워크 컴포넌트 단위를 가진다. Angular, Vue 보다 인기가 많다. SPA(Single Page Appliction) 하나의 페이지로 이루어진 어플리케이션. 화면에 내용이 변경될 때 계속해서 새로운 페이지를 호출하거나 새로고침해서 사용자한테 내용이 변경된 것을 제공하기 보다 하나의 페이지를 여러 부분적 단위로 나누고 각 부분별로 변경된 값을 가져옴으로서 하나의 페이지로 어플리케이션이 돌아가도록 하는 개념. 기존의 개념인 MPA(Mutil Page Application)과 반대 되는 개념이며, 리액트 프레임워크의 생명주기와도 관련이 깊다. SP..