React 입문
React 입문
React 가 필요한 이유
1. Component 화 하여 재사용 용이
React 는 Component 기반의 UI 라이브러리 로서 html 요소들을 컴포넌트화 하여 코드를 중복 작성하는 것 없이 재사용 할 수 있다.
2. 선언형 프로그래밍
명령형 프로그래밍
코드로 원하는 결과를 어떻게(How) 달성하는지, 과정에만 관심을 두는 프로그래밍
절차를 하나 하나 다 나열 한다.
Ex) jQuery
선언형 프로그래밍
코드로 원하는 결과가 무엇(What) 인지, 필요한것이 어떤것인지 기술하는 프로그래밍
목적을 바로 말함
Ex) React
3. Virtual Dom
Dom (Document Object Model)
html 을 트리 형태로 변환한 객체
Dom 을 자주 조작하는 것은 필요 이상의 연산을 하게되어 브라우저의 성능이 저하된다.
VirtualDom
가상의 Dom
자바스크립트를 사용할 때, 실제 DOM 을 조작하는 것이 아니라 먼저 가상의 DOM에 적용시키고, 그 결과를 실제 DOM 에 전달하여 불필요한 연산을 줄이고 브라우저의 성능을 개선시킨다.
Create React App
React App을 만드는 방법
React App 을 만들기 위해서는 react library 뿐만 아니라 Webpack, Babel 등과 같은 npm library 들을 설치하고 설정 해야 한다.
이러한 과정을 생략하고 기초 설정 작업이 설정된 Create React App 패키지를 사용한다.
Create React App 만들기
- 폴더 생성 후 VsCode 로 폴더 open
- VsCode 에서 terminal 연 후, npx 명령어를 사용하여 create react app 설치
npx create-react-app name
- 파일 탐색기를 열어서 reactExam1 > reactExam1 의 트리구조를 가지기 때문에 하위 reactExam1 내에 있는 파일들을 잘라내기 하여 상위 reactExam1에 붙여넣기 하고 하위 reactExam1 폴더를 삭제한다.
Create React App 프로젝트 구성 요소
- node_modules : node.js 패키지의 구성요소
- public
- favicon.ico : React 아이콘 (크롬 브라우저 탭 상단에 위치)
- index.html : main 프로그램인 index.js 에 의해 rendering 된 결과가 표시 (HTML template file)
- logo192.png, logo512.png, mainfext.json : 앱에 필요한 정보들 (앱의 이름, 배경색 등)
- robots.txt : 검색사이트(네이버, 구글) 에서 검색엔진 수집 여부 지정
- src
- App.css : 스타일 파일
- App.js : Component를 정의하는 js 파일
- App.test.js : test 용도로 사용하는 파일 (삭제 해도됨)
- index.css : 스타일 파일
- index.js : main js 파일로 Component를 조합하고 렌더링 하여 index.html에 표시한다.
- logo.svg : (삭제해도됨)
- reportWebVitals.js : Web 퍼포먼스 측정 도구 (삭제해도됨)
- setupTests.js : test 용도로 사용하는 파일 (삭제해도됨)
- package-lock.json : node.js 패키지의 구성요소
- package.json : node.js 패키지의 구성요소
JSX
JSX 란?
JSX(JavaScript XML) 은 Javascript 에 XML 을 추가하여 확장한 문법이다.
브라우저에서 실행되기 전 babel 에 의해 자바스크립트 코드로 변환된다.
JSX 문법
- 닫힘 규칙
태그를 사용할 때 반드시 받는 태그가 있어야 한다.
<div></div> <br/> <image/>
- 최상위 태그 규칙
최상위 태그: 모든 태그를 감싸고 있는 태그
반드시 하나의 최상위 태그가 존재해야 한다.
function component1(){ let name = 'espania'; return ( <Component0/> //컴포넌트 사용 <header> <h2> JSX expressions must have on parent element. </h2> </header> ); //오류 발생 }function component1(){ let name = 'espania'; return ( <div> <Component0/> <header> <h2> JSX expressions must have on parent element. </h2> </header> </div> ); //정상 작동 }최상위 태그로 묶고 싶지 않다면, <React.Fragment> 태그를 사용한다.
import React from 'react'; //import를 통해서 react 기능 불러오기 function component1(){ let name = 'espania'; return ( <React.Fragment> <Component0/> <header> <h2> JSX expressions must have on parent element. </h2> </header> </React.Fragment> ); }
- 자바스크립트의 값 사용
{} 중괄호를 사용하면 자바스크립트의 변수 나 값을 포함할 수 있다.
function component1(){ let name = 'espania'; const number = 5; const func1 = () => { return 'funcExamp'; } return ( <div> <Component0/> <header> <h2> JSX expressions can use JS expresions. </h2> {name} //변수 {1+2} //값의 연산 {'문자열'} //문자열 {func1()} //함수 {number}는 : {number %2 === 0 ? "작수" : "음수"} //조건부 렌더링 </header> </div> ); }State (상태)
State 란?
State 는 Component UI 의 데이터가 다양한 상황이나 이벤트에 따라서 변경이 되면, Component UI 가 자동으로 갱신되도록 동적 데이터를 관리하는 Object 이다.
Component 의 State 가 바뀌면 해당 Component 가 re-render 가 되고, 이러한 특징은 React Component 가 가지는 특성 중 하나 이다.
State 예제
import React, {useState} from 'react'; const Counter = () => { const [count, setCount] = useState(0); // useState 사용 , 매개변수 : 초기값 const onIncrease = () => { setCount(count + 1); //setCount 를 통해 state를 변경해야 re rendering 된다. } const onDecrease = () => { setCount(count - 1); } return ( <div> <h1>{count}</h1> <button onClick={onIncrease}> + </button> <button onClick={onDecrease}> - </button> </div> ) } export default Counter;Props
Props 란?
<Counter/> // 기존 <Counter initialValue={5}/> // 태그의 prop value 지정Component 에 props value 를 지정하면, 해당 Component 에서 자식 Component 로 데이터를 전달 할 수 있다.
Props 사용
App.js 파일
import logo from './logo.svg'; import Counter from './Counter'; import './App.css'; function App() { const counterProps = { a: 1, b: 2, c: 3, d: 4, e: 5, } return ( <div className="App"> <header className="App-header"> <Counter initialValue={5} {...counterProps}/> //spread 연산자 사용 가능 </header> </div> ); } export default App;App.js 파일에서 initialValue 와 counterProps 의 값을 전개연산자를 통해 Counter Component로 전달해준다.
Counter.js 파일
import React, {useState} from "react" const Counter = (props) => { console.log(props); const [count, setCount] = useState(0); const onIncrease = () => { setCount(count+1); } const onDecrease = () => { setCount(count-1); } return ( <div> <h2>{count}</h2> <button onClick={onIncrease}>+</button> <button onClick={onDecrease}>-</button> </div> ); }; export default Counter;App.js 에서 전달받은 initiValue 와 counterProps 의 값들을 매개변수로 전달 받아 Counter.js 에서 사용할 수 있다. 이 때 전달받은 매개변수를 props 라고 한다.
props 의 값들을 출력해 보면 App.js 에서 정의한 값들을 확인할 수 있다.
전달할 수 있는 또다른 Props
위 처럼 Component 의 State 를 props 로 전달할 수 있지만 아래 처럼 JSX Element 요소를 전달 할 수도 있다.
Counter.js 파일
import React, {useState} from "react" import OddEvenResult from "./OddEvenResult"; import Container from "./Container"; const Counter = () => { const [count, setCount] = useState(0); const onIncrease = () => { setCount(count+1); } const onDecrease = () => { setCount(count-1); } return ( <Container> <h2>{count}</h2> <button onClick={onIncrease}>+</button> <button onClick={onDecrease}>-</button> <OddEvenResult count={count}/> </Container> ); }; export default Counter;Container.js 파일
const Container = ({children}) => { return ( <div style={{margin: 20, padding: 20, border: "1px solid red"}}> {children} </div> ); }; export default Container;
Re-render
- Component 의 State가 변경 될 때, 해당 Component는 re-render 된다.
- 부모 Component 로 부터 전달 받은 props 가 바뀔 때 마다 부모 Component와 자식 Component가 re-render 된다.
- 부모 Component 가 re-render 되면 자식 Component 도 re-render 된다.