[React] 기초(1)

Node.js 설치

 

https://limjisang1115.tistory.com/152

Node.js 설치

 

설치를 하고 cmd창을 켜서 

node --version을 입력해 노드 버전을 확인한다.

---

자바

 - OS 위에서 작동한다.

파이썬

 - OS 위에서 작동한다.

자바스크립트

 - 브라우저 위에서 작동한다.

node.js

 - 자바스크립트를 OS 위에서 작동하도록 만든다.

 - 자바스크립트와 같은 문법으로 코드를 작성해서 OS에서 작동

 

*원래 자바스크립트는 OS에서 작동하지않지만 node.js를 사용하면 OS위에서 작동시킬 수 있다.

자바의 의존성과 비슷한게 npm, yarn이 있다.

 

---

공부할 폴더에서 우클릭후 Git Bash Here 후

yarn create react-app temp-react

를 입력한다.

실행이 다 되면 temp-react 라는 폴더가 만들어져 있다.

yarn.lock 파일은 모든 개발자가 동일한 패키지 버전을 사용하도록 할 수 있다.

node_modules는 yarn을 사용할때 라이브러리가 모여있는곳 - git에 등록하지 않는다.

public에 index.html에 body에 id가 root으로 되어있다.

src폴더는 index.js와 App.js를 보면된다.

index.js 아까 봤던 root를 초기화한다.

<App /> 여기서 App은 App.js를 의미한다.

*jsx - 리액트를 사용하는 자바스크립트에서 html태그를 사용하는 방법

 

IDE를 켜서 터미널에  yarn start를 입력하면 실행이 된다.

 

 

---

3개의 파일만 나두고 src 안의 파일을 다 지운다.

 

index.js안의 내용을 지우고

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
// import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
// reportWebVitals();

App.js안의 내용을 지우고

function App() {
  return (
    <div>안녕하세요</div>
  );
}

export default App;

만 적고 실행을 해보면

나온다.

 

하지만 div를 두개를 적으면 에러가 난다.

return은 태그안의 태그는 가능하지만 두개의 태그는 할 수 없다. 

그래서 이런식으로 적으면

가능하다.

 

src폴더에 App.css파일을 만들고

div {
    background-color: blue;
}

를넣고 

 

App.js 파일에

import './App.css'

를 추가하면

적용이 된다.

 

---

src폴더에 Hello.js 추가

function Hello() {
    return <div>안녕하세요.</div>;
}

export default Hello;

App.js에서 import

import Hello from './Hello';

이렇게 하면 Hello 컴포넌트를 여러번 사용할 수 있다.

return (
    <>
      <Hello />
      <Hello />
      <Hello />
    </>
  );

---

function App() {

    const arr = ['가', '나', '다', '라'];

  return (
    <>
      <Hello />
      <Hello />
      <Hello />
    </>
  );
}

arr 배열안의 갯수만큼 <Hello/>를 하고싶다.

function App() {

    const arr = ['가', '나', '다', '라'];

  return (
    <>
        {arr.map(el => <Hello />)}
    </>
  );
}

---

index.js에 <React.StrictMode> 삭제

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

 

Hello.js에 매개변수 추가

function Hello(props) {
    console.log(props);
    return <div>안녕하세요. {props.data}</div>;
}

export default Hello;

App.js에 코드추가

return (
  <>
    {arr.map((el, index) => <Hello key={index} data={el}/>)}
  </>
);

 

*map을 쓰는데 익숙하지 않다면

function App() {

    const arr = ['가', '나', '다', '라'];
    // const arr = [<Hello />, <Hello />, <Hello />, <Hello />];

    const changeArr = () => {
        const newArr = [];
        for (const key in arr) {
            newArr.push(<Hello key={key} data={arr[key]} />);
        }
        return newArr;
    }

  return (
    <>
        {/*{arr.map((el, index) => <Hello key={index} data={el}/>)}*/}
        {changeArr()}
    </>
  );
}

이렇게 forin을 써서 할 수 있다.