잇스쿨

스마트폰을 예시로 들었을 때, 사용자의 입장과 제품을 만드는 제작자의 입장이 존재할 수 있다. 사용자 입장에서 스마트폰을 조작하는 장치는 "버튼"과 "화면"이라고 할 수 있다. 장치를 조작하는 장치를 "props" 제품의 내부적인 구현을 위해서 다양한 조작 장치를 가지게 하는데 이 내부적 장치들을 "state" 즉, Component 의 기본적인 동작을 바꾸고 싶을 때 사용자에게 제공하는 props를 제공하여 조작할 수 있게 된다. 사용자에게는 알 필요가 없는 Component 내부적으로 사용되는 것들을 state 라고 한다. 아래의 코드로 자세히 알아보자. src/App.js import React, { Component } from 'react'; import Nav from './components..

샘플 코드 want-itscool Hello~ Frontend World HTML CSS JavaScript Subject1 HTML is HyperText Markup Language. React를 왜 쓰는지 이해하기 위해서는 우선 public/index.html에 위의 샘플 코드가 있다고 가정하여 설명할 수 있습니다. 시맨틱 마크업에 대해서 알고 있다면 위의 소스 코드가 어떤 구조로 만들어져 있는지 쉽게 이해할 수 있습니다. 이제 위의 코드를 컴포넌트화하여 React를 왜 사용하는지를 알아보겠습니다. App.js import React, { Component } from 'react'; import './App.css'; class Header extends Component { render() { ..

프로젝트 구성 react-app 프로젝트 구성은 위의 그림과 같습니다. index.html id가 root인 태그 안에 UI 컴포넌트를 정의하게 된다. 꼭 id가 root여야하는건 아니며, 진입 파일에서 id는 변경 가능하다. App.js UI 컴포넌트에 해당하는 코드가 작성된 파일 import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { render() { return( Edit src/App.js and save to reload. Learn React ); } } export default App; // 작성한 컴포넌트를 다른 곳에서 불러..