react 처음 시작할 때!! 참고

 

 

리액트 설치

npm init react-app <이름>

npm create react-app <이름>

 

(웹팩 바벨의 설치가 포함되어 있음)

 

리액트 rounte 설치 

 npm install react-router-dom

 

리액트 실행

 

해당 디렉토리로 들어가 

 

npm start 

 

리액트 아이콘 설치

 

npm install react-icons --save // npm
yarn add react-icons // yarn

리액트 알아보기 

import logo from './logo.svg';

import './App.css';

 

function App() {

return (

<div className="App">

<header className="App-header">

<img src={logo} className="App-logo" alt="logo" />

<p>

Edit <code>src/App.js</code> and save to reload.

</p>

<a

className="App-link"

href="https://reactjs.org"

target="_blank"

rel="noopener noreferrer"

>

Learn React

</a>

</header>

</div>

);

}

 

export default App;

 

JSX를 쓰는 이유

JSX 형태란 JS의 확장 문법이고 간편하게 DOM요소에 render할 수 있다. 뿐만 아니라 JS 표현식을 쓸 수 있다.

이를 풀어 쓰면 Dom 형식으로 div를 만들고 찾아서 새롭게 컨텐츠를 넣는 등 굉장한 시간이 걸리게 됩니다.

1. 수 천개의 줄에서 데이터를 바꾸고 싶으면 그 위치와 아이디를 기억해야 합니다

2. 데이터를 업데이트하기 위해서는 Document.CreatElement QuerySelector textcontent 다 사용해야 합니다. 끔찍합니다.

 

return React.creatElement("div,null,"Hello"...)

 

 

리액트에서 꼭 지켜야할 규칙

 

1.return  안에는 꼭 DOM을 명시하기 위해서 하나의 태그를 선언하거나 or {Fragement} from 'react'를 이용해서 쓰지 않아도 되는 상황을 만들어야 한다.

   <div>

                                      or nothing

  </div>

 

 

 

2. 조건문은 사용이 불가능하다. 그래서 대체할 수 있는 3가지 방법이 있다.

      2.1 삼항 연산자

         

<div>

{name === "hyuncheol"

? <h1>"현철이 맞습니다"</h1>

: <h2>"현철이 아닙니다"</h2>

 

}

 

 

</div>

 

 

     2.2 && 연산자 사용 p67(리액트를 다루는 기술)

 

3. input 태그 or img 태그는 한 번만 써도 되지만 여기서는 꼭 닫아줘야지 에러가 생기지 않는다.