리엑트
[ React ] 리액트 동적 데이터 state
리액트의 컴포넌트가 다루는 데이터 중 저번 게시글에선 props 를 다루었다. 이번 게시글에선 동적 데이터인 state 를 다뤄보자. 앞에서도 말했듯 props는 부모 컴포넌트에서 넘어온 정적 데이터 형태이다. 반면, state는 컴포넌트 내부에서 선언해 내부에서 수정 및 작업이 가능한 동적 데이터 형태이다. 아래 소스를 보고 간단히 짚어보자. ( index.js 와 index.html 은 이전 props 설명 게시글과 동일 ) App.js import React, { Component } from 'react'; import Count from './Count'; class App extends Component { //render 함수 render() { return ( //JSX ..
[ React ] 리액트 화면 띄워보기
이번 게시글에선 리액트를 사용해 화면을 띄워보는 내용을 다룰 것이다. 저번 게시글에서 만든 hello-react 프로젝트를 코드에디터 프로그램으로 열어보자. 필자는 VisualCode 사용. 다음과 같은 프로젝트가 구성이 되어있는데 눈여겨 볼 곳은 index.html, index.js, App.js 파일이다 App.js 는 사용자가 만든 컴포넌트다. 이 컴포넌트를 호출하면 호출한 곳으로 화면을 그려주던, 그 외의 기능을 수행하던 할 내용이 담겨있다. index.html 은 우리가 흔히 알고있는 브라우저에 보여주고자 할 화면이다. index.js 는 App.js ( 컴포넌트 ) 와 index.html ( 화면 )을 연결해주는 다리 기능? 을 해주는 파일이다. 소스를 참고하면서 이해해보자. A..