[코딩앙마] React JS 1~9차

김서윤·2024년 1월 21일

2023 React web 기록 프론트엔드

[코딩앙마] React JS

목록 보기

1/2

React Start

node_modules

: 필요한 모듈이 설치되어 있는 폴더 (git 업로드 X)

package.json → “dependencies”에 모듈 기록

npm install → 모듈 설치 가능

public

<div id="root"></div>

div id="root" → 리액트 코드가 실행돼서 만들어진 dom이 구현

src

: 대부분의 작업이 src 폴더 내부에서 진행

import App from './App';

→ 초기화면이 App.js이 사용된 페이지

App.js

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>Coding angma</p>
        <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

class가 자바스크립트 예약어 → className으로 사용

JSX → 자바스크립트 내부에 html 코드를 작성하는 것

Hot Module Replacement(HMR)

명령어

npm start : 개발모드로 프로그램을 실행
npm build : 실제 배포모드로 만들어줌
npm test : 테스트
npm eject : 내부 설정파일을 꺼내는 역할 / 웹페이지 설정을 변경하고 싶을 때 사용

컴포넌트

: 각 부분을 컴포넌트로 만들어서 조립해서 사용

→ 코드 재사용 O / 유지 보수 수월

함수명 대문자로 시작
스타일 → 객체로 전달해야 적용 가능

App.js → 객체 생성 및 첫 시도

import "./App.css";

function App() {
  const name = "Tom";
  const naver = {
    name: "네이버",
    url: "https://naver.com",
  };
  return (
    <div className="App">
      <h1 style={{ color: "#f0f", backgroundColor: "green" }}>
        Hello, {name}.<p>(2 + 3)</p>
      </h1>
      <a href={naver.url}>{naver.name}</a>
    </div>
  );
}

export default App;

Hello.js → src > component 폴더 생성 > Hello.js

const Hello = function() {
    <p>Hello</p>
};

export default Hello;

const Hello = () => {
    <p>Hello</p>
};

export default Hello;

export default function Hello() {
  return <p>Hello</p>;
}

App.js 에 반영

import "./App.css";
import Hello from "./component/Hello";

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

export default App;

JSX → 하나의 태그만 받음 → div 태그로 묶어서 사용

CSS 작성법 (module css)

1. inline style

Hello.js → inline style

import World from "./World";

export default function Hello() {
  return (
    <div>
      <h1
        style={{
          color: "#f00",
          borderRight: "2px soldid #000",
          marginBottom: "30px",
          opacity: 1,
        }}
      >
        Hello
      </h1>
      <World />
      <World />
    </div>
  );
}

→ sytle은 객체로 처리해 작성

2. CSS 파일

index.css → 전체에 해당하는 css

App.css → App이라는 컴포넌트에 해당하는 css

→ 각 컴포넌트에 스타일이 적용되는 것이 아니라 hd 안에 전체 스타일이 작성되어 오버레이

❗ 개별 컴포넌트 스타일
css 파일명 → Hello.module.css
import sytles from "./Hello.module.css";
<div className={sytles.box}>Hello</div>

Hello.js → Css file

import World from "./World";
import sytles from "./Hello.module.css";

export default function Hello() {
  return (
    <div>
      <h1
        style={{
          color: "#f00",
          borderRight: "2px soldid #000",
          marginBottom: "30px",
          opacity: 1,
        }}
      >
        Hello
      </h1>
      <div className={sytles.box}>Hello</div>
    </div>
  );
}

→ 같은 class명을 사용해도 다른 스타일 적용 가능

이벤트 처리 (Handling Events)

Hello.js → Handling Events / 2 ways

import World from "./World";
import sytles from "./Hello.module.css";

export default function Hello() {
  function showName() {
    console.log("Mike");
  }

  return (
    <div>
      <h1>Hello</h1>
      <button onClick={showName}>Show name</button>
      <button
        onClick={() => {
          console.log(30);
        }}
      >
        Show age
      </button>
    </div>
  );
}

2가지의 방식 → inline의 경우 매개변수를 전달하기 편함

Hello.js → 다른 방법으로 같은 코드 작성

	function showText(e) {
    console.log(e.target.value);
  }

	<input type="text" onChange={showText} />

// =

	<input
    type="text"
    onChange={(e) => {
      console.log(e.target.value);
    }}
   />

// =

  function showText(txt) {
    console.log(txt);
  }

  <input
    type="text"
    onChange={(e) => {
      const txt = e.target.value;
      showText(txt);
    }}
  />

state, useState

state : 컴포넌트가 가지고 있는 상태값

→ 속성값이 변하면 리액트는 자동으로 ui를 업데이트

Hooks API → useState

Hello.js → useState

import { useState } from "react";

export default function Hello() {
  // let name = "Mike";
  const [name, setName] = useState("Mike");

  function changeName() {
    const newName = name === "Mike" ? "Jane" : "Mike";
    // document.getElementById("name").innerText = name;
    setName(newName);
  }

  return (
    <div>
      <h1>state</h1>
      <h2 id="name">{name}</h2>
      <button onClick={changeName}>Change</button>
    </div>
  );
}

// =
  function changeName() {
    setName(name === "Mike" ? "Jane" : "Mike");
  }

// =
 <button
   onClick={() => {
     setName(name === "Mike" ? "Jane" : "Mike");
   }}
  >
  Change
  </button>

동일한 컴포넌트라도 state는 각각 관리

→ 반복해서 3번을 쓰더라도 가운데 버튼을 누르면 가운데의 이름만 변경

props

props(properties) : 속성값

→ 컴포넌트 내부에서 변경 불가능

→ 변경하고 싶다면 컴포넌트 내부에서 state를 다시 만들어야 됨

Hello.js → props로 age를 가져오는 원본 코드 / 2가지

import { useState } from "react";

export default function Hello(props) {
  const [name, setName] = useState("Mike");

  return (
    <div>
      <h2 id="name">
        {name}({props.age})
      </h2>
      <button
        onClick={() => {
          setName(name === "Mike" ? "Jane" : "Mike");
        }}
      >
        Change
      </button>
    </div>
  );
}

props → age 사용 코드

```jsx
import { useState } from "react";

export default function Hello({ age }) {
  const [name, setName] = useState("Mike");

  return (
    <div>
      <h2 id="name">
        {name}({age})
      </h2>
      <button
        onClick={() => {
          setName(name === "Mike" ? "Jane" : "Mike");
        }}
      >
        Change
      </button>
    </div>
  );
}
```

원래 코드에서 props를 age만 사용하고 있기 때문에 이 코드도 사용 가능

Hello.js → age값 변경

import { useState } from "react";

export default function Hello(props) {
  const [name, setName] = useState("Mike");
  const [age, setAge] = useState(props.age);

  return (
    <div>
      <h2 id="name">
        {name}({age})
      </h2>
      <button
        onClick={() => {
          setName(name === "Mike" ? "Jane" : "Mike");
          setAge(age + 1);
        }}
      >
        Change
      </button>
    </div>
  );
}

Hello.js → age 값 조건으로 msg 출력

import { useState } from "react";

export default function Hello({ age }) {
  const [name, setName] = useState("Mike");
  const msg = age > 19 ? "성인 입니다." : "미성년자 입니다.";

  return (
    <div>
      <h2 id="name">
        {name}({age}) : {msg}
      </h2>
      <button
        onClick={() => {
          setName(name === "Mike" ? "Jane" : "Mike");
        }}
      >
        Change
      </button>
    </div>
  );
}

더미 데이터 구현, map() 반복문

dummy data → json 파일

map

반복문 → map 사용

: 배열을 받아서 또 다른 배열을 반환

→ 반환되는 배열의 요소는 jsx로 작성

날짜 필러팅을 통해 날짜의 단어 출력

App.js

import DayList from "./component/DayList";
import Header from "./component/Header";
import Day from "./component/Day";

function App() {
  return (
    <div className="App">
      <Header />
      <DayList />
      <Day />
    </div>
  );
}

export default App;

Header.js

export default function Header() {
  return (
    <div className="header">
      <h1>
        <a href="/">토익 영단어(고급)</a>
      </h1>
      <div className="menu">
        <a href="#x" className="link">
          단어 추가
        </a>
        <a href="#x" className="link">
          Day 추가
        </a>
      </div>
    </div>
  );
}

DayList.js

import dummy from "../db/data.json";

export default function DayList() {
  console.log(dummy);
  return (
    <ul className="list_day">
      {dummy.days.map((day) => (
        <li key={day.id}>Day {day.day}</li>
      ))}
    </ul>
  );
}

Day.js

import dummy from "../db/data.json";

export default function Day() {
  //   dummy.words;
  const day = 3;
  const wordList = dummy.words.filter((word) => word.day === day);

  return (
    <>
      <table>
        <tbody>
          {wordList.map((word) => (
            <tr key={word.id}>
              <td>{word.eng}</td>
              <td>{word.kor}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );
}

data.json

{
  "days": [
    { "id": 1, "day": 1 },
    { "id": 2, "day": 2 },
    { "id": 3, "day": 3 },
    { "id": 4, "day": 4 }
  ],
  "words": [
    { "id": 1, "day": 1, "eng": "book", "kor": "책", "isDone": false },
    { "id": 2, "day": 2, "eng": "car", "kor": "자동차", "isDone": false },
    { "id": 3, "day": 3, "eng": "school", "kor": "학교", "isDone": false },
    { "id": 4, "day": 3, "eng": "pencil", "kor": "연필", "isDone": false },
    { "id": 5, "day": "3", "eng": "window", "kor": "창문", "isDone": false },
    { "id": 6, "day": "3", "eng": "house", "kor": "집", "isDone": false },
    { "id": 7, "day": "2", "eng": "mouse", "kor": "쥐", "isDone": false },
    { "id": 8, "day": "4", "eng": "monkey", "kor": "원숭이", "isDone": false },
    { "id": 9, "day": "4", "eng": "apple", "kor": "사과", "isDone": false },
    { "id": 10, "day": "3", "eng": "apple", "kor": "사과", "isDone": false }
  ]
}

핵심 요약

💻 리액트 프로젝트 생성 명령어
npx create-react-app 프로젝트명(폴더명)

❗ 브라우저 실행 / 종료 명령어
npm start / Ctrl + C

🔖 개별 컴포넌트 스타일
css 파일명 → Hello.module.css
import sytles from "./Hello.module.css";
<div className={sytles.box}>Hello</div>

⭐ State, Props
화면에 데이터를 갱신 → 두가지 사용해 처리

✏️ 다음 스터디

날짜별로 클릭했을 때 해당 단어 출력 → 새로운 페이지 생성 & 라우터 사용

김서윤

다음 포스트

[코딩앙마] React JS 1~9차