Coding Story
[ React ] 리액트 Input Form 상태 관리, 배열 관리
지금까지는 자식 컴포넌트가 부모 컴포넌트에게 단순한 Element 를 return 해주는 데에 한했다. 이번 게시글에선 Input Element 와 이를 Form 으로 감싸 Form 의 상태를 직접 관리하고, React 에선 배열을 어떻게 쓰는지 간단하게 알아보자. 먼저 UserInput.js 의 소스를 살펴보자. UserInput.js import React, {Component} from 'react'; class UserInput extends Component { //state 에 userName, userGender, phoneNumber 초기화 state = { userName: '', userGender: '', phoneNumber: '' } inputChange = (e) ..
[ 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..