코딩앙마 리엑트 정리

밀크티·2022년 3월 28일
0
post-thumbnail

리엑트 훅:
함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있게 해주는 기능
딤드 처리:
어둑하게 만드는 것
렌더링:
개발자가 작성한 문서가 브라우저에서 출력되는 과정을 의미
컴포넌트:
여러개의 함수들을 모아 하나의 기능을 수행할 수 있도록 구성한 작은 단위를 의미
컴포넌트의 장점:
코드를 재사용 할 수 있음, 유지보수가 훨씬 쉬워짐.

자바 스크립트에서는 class가 예약어라 대신 className을 사용.

cmd
npx create-react-app voca
vscode에 가서 voca 파일 열기

// App.js
function App() {
return (
	<div className="App">
		<h1
		 style={{
			color: "#f0f",
    		backgroundColor : "green",
          	}}
         	>
         	Hello, Mike.
        	</h1>
      	</div>
	);
   }
// App.js
function App() {
const name = "Tom";
return (
	<div className="App">
		<h1
		 style={{
			color: "#f0f",
    		backgroundColor : "green",
          	}}
         	>
         	Hello, {name}.<p> {2+3} </p>
        	</h1>
      	</div>
	);
   }
// App.js
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>
	);
   }
   
   
 //Hello.js

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

export default Hello;

css 작성법 3가지

  1. 인라인 스타일 사용
// Hello.js

<h1
	style={{
    	color: "#f00",
        borderRight: "12px solid #000",
        marginBottom: "50px",
        opacity: 0.5,
    }}
>
  1. css 파일 활용
// App.css

.box {
	width: 100px;
    height: 100px;
    background-color: red;
}
  1. css 모듈 활용
    가장 추천하는 방법 그러나 수업에서는 컴포넌트도 별로 필요 없고 페이지도 몇장 안되어서 2번 방법을 사용.

터미널로 npm install react-router-dom 설치

// Daylist.js

import { Link } from "react-router-dom";
import dummy from "../db/data.json";

export default function Daylist() {
    return (
    <ul className="list_day">
        {dummy.days.map((day) => (
            <li key={day.id}>
                <Link to={`/day/${day.day}`}>Day {day.day}</Link>
            </li>
        ))}
        </ul>
        );
}
import { useState } from "react"

export default function Word({ word }){
    const [isShow, setIsShow] = useState(false);
    const [isDone, setIsDone] = useState(word.isDone);

    function toggleShow() {
        setIsShow(!isShow);
    }
    
    function toggleDone() {
        setIsDone(!isDone);
    }

    return (
        <tr className={isDone ? 'off' : ""}>
        <td>
            <input type="checkbox" checked={isDone} onChange={toggleDone} />
        </td>
        <td>{word.eng}</td>
        <td>{isShow && word.kor}</td>
        <td>
            <button onClick={toggleShow}>
                뜻 {isShow ? 'Show' : 'Hide'}
            </button>
            <button className="btn_del">delete</button>
        </td>
    </tr>
    )
}


터미널에서
npm install -g json-server 입력 후 설치
성공적으로 설치 됐다고 뜨면,
json-server --watch ./src/db/data.json --port 3001 설치 (포트 3000은 이미 사용중이니까)
그럼
{^-^}/ hi! 라고 뜨고,
http://localhost:3001/days
http://localhost:3001/words
가 뜸.

REST API란?
create: post
read: get
update: put
delete: delete

useEffet & fitch()

import { useEffect, useState } from "react";
import { Link } from "react-router-dom";

export default function Daylist() {
  const [days, setDays] = useState([0]);

  useEffect(() => {
    fetch("http://localhost:3001/days")
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        setDays(data);
      });
  }, []);

  return (
    <>
      <ul className="list_day">
        {days.map((day) => (
          <li key={day.id}>
            <Link to={`/day/${day.day}`}>Day {day.day}</Link>
          </li>
        ))}
      </ul>
    </>
  );
}

custom hook

import { useParams } from "react-router-dom";
import useFetch from "../hooks/useFetch";
import Word from "./Word ";

export default function Day() {
  const { day } = useParams();

  const words = useFetch(`http://localhost:3001/words?day=${day}`);

  return (
    <>
      <h2>Day {day}</h2>
      <table>
        <tbody>
          {words.map((word) => (
            <Word word={word} key={word.id} />
          ))}
        </tbody>
      </table>
    </>
  );
}

실습다하고 필기하니까 힘들다...담부터는 필기하고 실습하는 걸로...

0개의 댓글