[React.js] CRA 기초 - 설치/state/Component/props

Latest update : 2021.04.19 - 수정 완료

이후 기재해야 할 수정사항은 추가 포스팅 후 링크하겠습니다. (기초영역일 경우)

---

어려웠던 class형 component 바로가기

2021.04.19 - [Front-end Study/React.js] - [React.js] 기초 - class로 component 만들기 (구문법)

 

CRA 기반 React.js

---

<React.js 설치>

• Node.js 설치 (nodejs.org/ko/download/)
• (CRA) npx create-react-app 프로젝트명 or yarn create react-app 프로젝트명 -> npm start

npx create-react-app 프로젝트명

(or)

yarn create react-app 프로젝트명

(and)

npm start

---

<React 문법>

1. state

리액트 데이터 : immutable data

state 예시

import React, { useState } from 'react';

let [a, setA] = useState(['string1','string2']);
let [b, setB] = useState(0);
let [c, setC] = useState(false);

let d = 'exampleD';

tip1) 문자, 숫자, Array, Object 다 가능

tip2) state deepcopy

 

 

deepcopy 예시

var [data, setData] = useState(['string1','string2']);

var deepcopyData = [...data];
deepcopyData[0] = '수정내용';
setData(deepcopyData);

 

2. Component

function App(){
  return (
    <div className="App">
    	<Test />
    </div>
  )
}

function Test(){
  return (
    <>
    <div className="ex">
    </div>
    </>
  )
}

return 내 <하나의 최상위 태그> 필수입니다.

return (
  <div></div>
  <div></div>
  <div></div>
)

ㄴ ERROR


return (
  <div>
    <div></div>
    <div></div>
  </div>
)

ㄴ OK

tip) 자주 반복해서 쓸 UI를 Component화 하세요.

 

 

UI예시 - Boolean 활용

// 기본 js 방식

<div className="ex" style="display: block;">
</div>

// react 방식

let [testUI, setTestUI] = useState(false);

function App(){
	return (
      <div className="App">
        <button onClick={ ()=>{ setTestUI(true) } }></button>
        {
        setTestUI(true)
        ? <Test />
        : null
        }
      </div>
    )

}

function Test(){
	return (
    	<>
          <div className="testUI">
          </div>
        </>
    )
}

tip) 반복문에는 key={ 고 유한 값 } 이 필수예요!

 

 

UI예시 - Array.map() 활용

function App(){
  return (
    <div className="App">
      var array = ['one','two','three'];

      {
        array.map(function(e, i){
        return (
          <div className="ex" key="{ i }">
          	<p>{ i }번째 : { e }</p>
          </div>
        )
        })
      }
    </div>
  )
}

 

props 예시

function App(){
  let [test,setTest] = useState(0);
  return (
    <div className="App">
    	<Test test={test} />
    </div>
  )
}

function Test(props){
  return (
    <>
    <div className="ex">
    	<p>{props.test}</p>
    </div>
    </>
  )
}

---

<기타>

Q) 터미널 warning 보기 싫으면

A) /* eslint-disable */

/* eslint-disable */