React js

Hyun Lee·2023년 1월 13일

웹개발 공부

목록 보기

5/6

React js 강좌 : 코딩앙마
동영상 17개 https://youtube.com/playlist?list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-

1. 설치(create-react-app)

터미널에 npx create-react-app 파일명 -> 자동 세팅됨

vscode 터미널에서 npm start 입력하면 자동으로 브라우저 열림

2. 컴포넌트, JSX

여기서 함수가 return 하는 것이 JSX(javascript XML)

3. 컴포넌트 만들기

Hello.js

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

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

또는

export defualt function Hello(){
	return(
    	<div>     
    		<h1>Hello</h1>
   		<div>   // jsx는 하나의 태그만 만들 수 있어서 div 등으로 묶어줘야함, 아님 오류남
    );
}

4. CSS 작성법

1

2

3
그냥 App.css로 만들면 오버라이딩 될 수 있으니 모듈로 만들어보자
컴포넌트.module.css 
파일 새로 만들고
import styles from "./컴포넌트.module.css"
className을 문자열이 아닌
classname = {styles.box}
이 강의에서는 편의를 위해 index.css에 모두 적겠음

5. 이벤트 처리

따로 함수로 작성하기

onClick 내부에 직접 함수 작성하기

input 태그 활용하기

Hello.js

export default function Hello(){
    function showName() {
        console.log("Mike");
    }
    function showAge(age) {
        console.log(age);
    }
    // function showText(e) {
    //     console.log(e.target.value);
    // }
    function showText(txt) {
        console.log(txt);
    }

    return (
        <div>  
            <h1>Hello</h1>
            <button onClick={showName}>Show name</button>

            <button
                onClick={() => { 
                    showAge(10);
                }}
            >
                Show age
            </button>
            <br/>
            <input 
                type="text" 
                //onChange={showText}
                onChange={ e =>{
                    //console.loglog(e.target.value);
                    const txt = e.target.value;
                    showText(txt);
                }}
            />
        </div>
    );
}

6. state, useState

state : 컴포넌트가 가지고 있는 속성값

버튼을 누르면 이름이 바뀜

App.js 에 컴포넌트를 3개 넣어도 따로 관리됨

7.props : properties

컴포넌트에서 props 임의로 변경 안됨

화면에 어떤 데이터를 갱신하기 위해서 state 와 props를 사용해 처리하는 것이 좋음.

한 컴포넌트가 가지고 있는 state를 props로 넘기기.
위에서 name은 props여기서 name은 state

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

단어장 헤더 만들기더미 데이터 만듦map(): 배열을 받아 또다른 배열을 반환해 줌 Day.js 파일 만듦

9. 라우터 구현 react-router-dom

App.js

import Header from "./component/Header";
import DayList from "./component/DayList";
import Day from "./component/Day";
import EmptyPage from "./component/EmptyPage";
import { BrowserRouter, Route, Switch } from "react-router-dom";
function App() {
  return (
    <BrowserRouter>
      <div className="App">
      <Header />
      <Switch>
        <Route exact path="/">
          <DayList /> 
        </Route>
        <Route path="/day/:day"> 
          <Day /> 
        </Route>
        <Route>
          <EmptyPage />
        </Route>
      </Switch>
      </div>
    </BrowserRouter>
  );
}
export default App;

Header.js

import {Link} from "react-router-dom";
export default function Header() {
    return <div className = "header">
        <h1> 
            <Link to="/"> 📒 토익 영단어(고급)</Link>
        </h1>
        <div className="menu">
            <a href="#x" className="link">
                단어 추가
            </a>
            <a href="#x" className="link">
                Day 추가
            </a>
        </div>
    </div>
}

DayList.js

import { Link } from 'react-router-dom';
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}> 
                    <Link to={`/day/${day.day}`}> Day {day.day} </Link>
                </li>
            ))}
        </ul>
    );
}

Day.js

import dummy from "../db/data.json"
import {useParams} from "react-router-dom";
export default function Day() {
    // dummy.words
    const {day} =  useParams();
    const wordList =  dummy.words.filter(word => word.day === Number(day));
    return (
        <>
            <h2>Day {day}</h2>
            <table>
                <tbody>
                    {wordList.map(word => (
                        <tr> 
                            <td> {word.eng} </td>
                            <td> {word.kor} </td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </>
    )
}

EmptyPage.js

import {Link} from "react-router-dom";
export default function EmptyPage(){
    return (
        <> 
        <h2>잘못된 접근입니다.</h2>
        <Link to="/">돌아가기</Link>
        </>
    );
}

10.json-server , Rest API

새로운 Word.js 컴포넌트 만들어서 채크박스와 버튼 두개 생성버튼에 기능 추가체크박스isDone을 true로 바꿔주면isDone인 단어칸 회색으로 바꾸기 그런데 이렇게 하면 더이상 체크박스가 동작하지 않으므로 isDone을 state로 만들어보겠음이렇게 바꾸면 체크박스 누르면 회색되고 다시 없애기 가능. 하지만 더미 데이터는 바뀌는게 아님