다운로드 및 실행 / 컴포넌트 / 반복문 / 배열

1. nodejs 설치

1. nodejs.org 들어가기
2. 18.16.0 LTS (Long Time Support) 다운로드 후 실행
3. cmd창에서 node -v 입력시 v18.16.0이 출력되어야 함
4. 환경변수에 nodejs 잘 들어가있는지 확인

 

2. visual studio Code 다운로드

1. https://code.visualstudio.com/download 들어가기
2. Windows 다운로드 후 실행
3. 바탕화면 바로가기 체크 후 install

 

3. VSCode에서 실행하기

1. File -> Open Folder ->  폴더 열기
2. Terminal -> new Terminal
3. npx create-react-app . 입력
4. 오류 발생 시, 명령 프롬프트cmd 에서 알맞은 경로에 들어간 후 npx create-react-app . 입력
5. npm start 입력

 

4. Port값 수정

package.json에서  Debug - "scripts" - "start" 의 내용 수정

"start": "set PORT=원하는 값 && react-scripts start"

 

5. 컴포넌트 생성과 적용

1) 기본(Hello.js 컴포넌트)

import './App.css';
import Hello from './Hello';

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

export default App;

function Hello(){
    return(
        <div>
            <p>안녕하세요</p>
            <p>범키</p>
            <p>010-1111-2222</p>
            <p>aa@a.com</p>
            <p>서울시</p>
        </div>
    )
}

export default Hello;

 

 2) 동적으로 출력하는 컴포넌트(Hello2.js 컴포넌트)

import './App.css';
import Hello2 from './Hello2';

function App() {
  return (
    <div className="App">
      <Hello2 name="박범기" phone="02-1111-2222" email="a@a.com" address="서울시" />
    </div>
  );
}

export default App;

import React from 'react'

function Hello2(props) {
  return (
    <div>
        <p>안녕하세요</p>
        <p>{props.name}</p>
        <p>{props.phone}</p>
        <p>{props.email}</p>
        <p>{props.address}</p>
    </div>
  )
}

export default Hello2

 

6. 배열

import './App.css';
import HelloArr from './HelloArr';

function App() {
  const arr = [
    {id:1, name:"범키", msg:"111"},
    {id:2, name:"히제", msg:"222"},
    {id:3, name:"애영", msg:"333"}
  ]

  return (
    <div className="App">
      {arr.map(obj=>(
        <HelloArr key={obj.id} obj1={obj}/>
      ))}
    </div>
  );
}

export default App;

import React from 'react'

function HelloArr(props) {
  return (
    <div>
        <p>{props.obj1.name}</p>
        <p>{props.obj1.msg}</p>
    </div>
  )
}

export default HelloArr