react
[ 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 ] 리액트 정적 데이터 pops
리액트 컴포넌트들이 다루는 데이터는 props 와 state 두 가지로 나뉜다. props 는 현 컴포넌트를 호출한 곳에서 넘겨준 data 이며, 이를 받아서 사용하기만 할 수 있고 값을 직접 수정할 수는 없다. state 는 현 컴포넌트 내부에서 선언한 data 이며 내부에서 값을 변경할 수 있다. 이번 게시글에선 props 만 사용할 생각이다. App.js import React, { Component } from 'react'; import Food from './Food'; class App extends Component { //render 함수 render() { return ( //JSX ); } } export default App; App.js 의 render 함수가 무엇을..
[ React ] 리액트 JSX 문법 규칙 및 유용한 플러그인
리액트를 사용할 때 JSX 문법을 사용하는데 이는 HTML과 굉장히 유사하게 생겼다. 하지만 HTML 은 분명히 아니며 이를 닮은 JavaScript Xml 임을 명심해야한다. 이러한 JSX 문법을 사용하려면 우리는 몇 가지 규칙을 지켜주어야 문제없이 돌아가게 되는데, 그 중 제일 중요한 몇 가지만 살펴보자. 이 두 가지만 지켜주어도 왠만하면 돌아간다. 1. 태그는 열었으면 반드시 닫아주어야 한다. 뭔 말인가 하면 우리는 Html 에서 input 태그 같은건 안닫는 경우가 종종 있다. Html 에서는 닫지 않아주어도 잘 돌아가기때문에 문제가 없었겠지만 JSX에서는 안 닫아주면 compile error 가 발생한다. 꼭 닫아주도록 하자. 2. 두 개 이상의 태그가 존재하면 하나의 태그로 감싸주어야 한..
[ React ] 리액트 화면 띄워보기
이번 게시글에선 리액트를 사용해 화면을 띄워보는 내용을 다룰 것이다. 저번 게시글에서 만든 hello-react 프로젝트를 코드에디터 프로그램으로 열어보자. 필자는 VisualCode 사용. 다음과 같은 프로젝트가 구성이 되어있는데 눈여겨 볼 곳은 index.html, index.js, App.js 파일이다 App.js 는 사용자가 만든 컴포넌트다. 이 컴포넌트를 호출하면 호출한 곳으로 화면을 그려주던, 그 외의 기능을 수행하던 할 내용이 담겨있다. index.html 은 우리가 흔히 알고있는 브라우저에 보여주고자 할 화면이다. index.js 는 App.js ( 컴포넌트 ) 와 index.html ( 화면 )을 연결해주는 다리 기능? 을 해주는 파일이다. 소스를 참고하면서 이해해보자. A..
[ React ] 리액트 Window 환경 설치
React 란? 프론트엔드 라이브러리 중 하나로 '컴포넌트'에 집중이 되어있는 facebook이 만든 라이브러리이다. 자바스크립트가 아닌 JSX 문법으로 작성한 컴포넌트를 여러 파일로 나눠 생성후 이를 한개로 결합해주는 구조다. 이 때 컴포넌트를 합쳐주는 Webpack이라는 도구와 JSX 등의 문법을 사용하기 위해 Babel이라는 도구를 사용한다. React를 사용하기 앞서 다음 항목들을 설치해야한다. 1. Node.js 위에서 언급한 Webpack과 Babel은 Node.js 기반으로 만들어져있다. 그러기에 Node.js를 필수적으로 설치해야 한다. 2. Yarn Node.js를 설치할 때 같이 묶여오는 패키지 매니저 도구가 있는데 이를 더 나은 속도로 사용하기 위해 설치한다. * Node.js..