PropsProps는 컴포넌트 내부의 Immutable Data(변화하지 않는 데이터)를 처리할 때 사용된다. JSX내부에 { this.props.propsName }이 있을 때, 컴포넌트를 렌더링할 때 propsName = "value"이런 식으로 전달하면 된다. 아래의 예제를 보자. index.js12345import React fr
JSX의 특징이전 포스팅에서 JSX에 대해 잠깐 다뤄보았지만, 본격적으로 자세하게 알아보자. 모든 리액트 컴포넌트는 render메소드가 있는데 이것은 컴포넌트가 어떻게 생길지 정의해준다. 여기서 특별한 점 하나는 JSX다. 이것은 자바스크립트 코드에서 html형식을 그대로 사용할 수 있게 해준다. 그리고 React JSX는 XML같은 문법을 Native
간단한 리액트 프로젝트 구현해보기이전 포스트에서 프로젝트를 생성하고 실행해봤다. 이제 직접 코드를 작성해보기 전에 프로젝트 내 src폴더 안에 있는 여러 파일들을 모두 삭제하자. 1. index.js 생성12345import React from 'react';import ReactDOM from 'react-dom';import App from './Ap
리액트 프로젝트 생성 및 실행 방법프로젝트 생성프로젝트 생성 명령 설치하기1npm install -g create-react-app 위 명령으로 리액트 프로젝트를 생성하는 create-react-app명령을 설치했다. -g옵션이 주어졌기 때문에 시스템 공통 폴더에 설치된다. 따라서 프로젝트를 새로 생성할 때마다 위 명령을 반복할 필요가 없다. 프로젝트 생
React.js 배경지식1. 번들링(Bundling)웹페이지에 포함된 js, css 파일들이 많다. 그런데 웹브라우저가 웹페이지를 표시할 때, 웹페이지에 포함된 js, css 파일들도 서버에서 다운로드 해야한다. 서버에서 여러 파일들을 다운로드 할 때, 한 번에 파일 하나씩 다운로드 하는 것 보다 파일들을 묶어서 한 번에 다운로드 하는 것이 효율적이다.