💪 React. Hooks

📌 개발 공부 1개월 차인 to-be 개발자의 자습 블로그🙂ﾠSep 13 ~ 17, 2021

현재 상태

React Hooks

App.js가 Hello.js를 import하고 있는 상황

1. components

React로 만든 page는 component들로 구성되어 있다.
이젠 page 단위로 HTML file을 만드는 게 아니라 각 부분을 compoenent로 만들어 조립해서 사용하는 것이다.
비슷한 component는 재사용할 수 있어서 편하다.
ex. header component, menu component 등

App.js가 하나의 component인데, component는 class형으로도 만들 수 있고, 함수형으로도 만들 수 있다.

// component folder 내 file에 code 작성

// 함수형 component
const Hello = function() {
  <p>Hello</p>;
};

↓ 화살표함수로 변경

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

↓ export까지 한 줄로 작성
export default function Hello(){
  <p>Hello</p>;
}

component명은 앞글자를 대문자로 적어야 한다.

component folder를 만들어 .js file도 만들고 함수도 만들어서 export하면 필요한 곳에서 해당 component를 import해 사용한다.

'.js'는 생략해서 작성하며, import한 후 HTML tag처럼 필요한 곳에 작성한다.

// import가 필요한 file에 code 작성

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

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

component는 어디에서든 몇 번이든 재사용이 가능하다.

---

2. JSX

JSX는 'JavaScript XML'의 약자이다.
함수형 component를 쓰면 이 JSX를 호출한다.

class는 HTML의 예약어이므로 JSX에서는 class 대신 className을 쓴다.

style은 객체로 적어야 전달된다.

import ".APP.css"

function App() {
  return <div className="App">
    <h1 style={{
        color: 'red'
    }}>Welcome</h1>
</div>;

export default App;

return 위에서 변수를 선언하고 (const name = "Jane";), return 안에서 중괄호에 변수명을 입력해 변수의 값을 사용할 수 있다. ({name})

return 안은 하나의 tag로 감싸져있어야 한다.

---

3. styling

ﾠﾠ1) 별도의 .scss file에 기존의 SCSS 문법으로 작성
ﾠﾠ ﾠﾠ(1) 추후 작성

ﾠﾠ2) 별도의 .css file에 기존의 CSS 문법으로 작성
ﾠﾠ ﾠﾠ(1) 각 .css file을 생성하여 CSS 작성
ﾠﾠﾠﾠﾠ ﾠﾠindex.css file에 작성한 style은 전역에, component이름.css에 작성한 style은 각 component에 영향을 미칠 것 같지만 clss명이 같으면 각 component.css에 작성한 style도 전역에 영향을 미친다. 그러므로 각 file로 작성하고 싶다면 (2)번 방식을 채택하는 게 좋다.
ﾠﾠ ﾠﾠ(2) 각 .module.css file을 생성하여 CSS 작성
ﾠﾠﾠﾠ ﾠ ﾠﾠ'styles'를 import해야 하며, CSS component를 중괄호 안에 적어야 한다.

import styled from "./App.module.css";
...
  <div className={styles.box}>App</div>

ﾠﾠ3) 모든 style을 index.css에 작성
ﾠﾠ ﾠﾠcomponent나 page가 많지 않을 때 사용하기 편함

ﾠﾠ4) in-line style
ﾠﾠ ﾠﾠ단, 객체로 작성해야 하며 dash가 아닌 camelCase로 작성해야 함
ﾠﾠ ﾠﾠ특별한 이유가 없다면 웬만하면 in-line으로 작성하지 않음

<h1
  style = {{
    color: '#f00'
    borderRight: "12px solid #000",
    marginBottom: "50px",
    opacity: 0.5,
}}

---

4. events

ﾠﾠ1) 미리 함수를 만들어놓고 전달

export default function Hello() {
  function showNmae() {
    console.log("Jane");
}

return (
  <div>
    <button onClick={showName}>Show Name</button>
  </div>
  );
}

ﾠﾠ ﾠﾠ참고로 {showName()}이라고 적으면(즉, 함수명에 괄호를 추가하면) return 위에 있는 '함수가 반환하는 값을 호출한다'는 의미이므로 'Jane'이 아닌 undefined가 반환된다. 지금은 showName 함수가 반환하는 값이 없기 때문이다.

ﾠﾠ2) 내부에 직접 함수를 작성

export default function Hello() {
  function showNmae(age) {
    console.log(age);
}

return (
  <div>
    <button onClick={() => {
      console.log(30);
    }}
    >Show Name</button>
  </div>
  );
}

ﾠﾠ ﾠﾠ위 방식으로 하면 매개변수를 전달하기 쉽다. 예를 들어, console.log(30); 자리에 showAge(10);을 입력하면 바로 showAge 값이 10이 된다.

---

5. state, useState

state는 component가 가지고 있는 속성 값이다.
이 속성 값이 변하면 React가 자동으로 UI를 update해준다.

버튼을 누를 때마다 이름을 변경하는 code
changeName 함수는 name을 바꿔주는데, Mike일 땐 Jane으로 Jane일 땐 Mike로 변경한다.
return에 {name}으로 이름을 표현해 준다.
button을 만들어 click하면 (onClick) 이름을 바꿔주게 한다.

let name = "Mike";

function changeName() {
  name = name === "Mike" ? "Jane" : "Mike";
  consoel.log(name)
}
  
return (
  <div>
    <h2>{name}</h2>
    <button onClick={changeName}>Change</button>
  </div>
);

하지만 이렇게 입력해도 Console tab에만 값이 잘 나올 뿐 화면에서는 이름이 바뀌지 않는다.
만약 Vanilla JavaScript로 coding한다면 다음과 같이 Dom update 작업을 해주어야 원하는 결과가 나온다.
ID가 name인 element의 text (innerText) 를 name으로 바꿔주는 code

//Dom update code 입력

let name = "Mike";

function changeName() {
  name = name === "Mike" ? "Jane" : "Mike";
  consoel.log(name);
  document.getElementById("name").innerText = name;
}
  
return (
  <div>
    <h2 id="name">{name}</h2>
    <button onClick={changeName}>Change</button>
  </div>
);

여기에서의 name은 변수일 뿐 이 React가 관리하는 state가 아니다.
그래서 값이 바뀌어도 React가 변경된 사실을 모르기 때문에 UI를 update해주지 않는다.
이때 state로 바꾸어줄 수 있는 게 React Hooks의 useState이다.

React Hooks는 React 16.8부터 사용할 수 있는데, UI component만 함수형으로 표현했던 이전과 달리, 모든 component를 함수형으로 만들 수 있게 되었다.
즉 Hooks에서도 state와 lifecycle을 관리할 수 있다.
개발자가 자신만의 custom Hooks를 만들 수도 있다.

useState

상태 값 (state) 관리를 위해 Hooks에서 사용한다.

import를 하고 사용해야 한다.

useState는 배열을 반환한다.
배열의 첫 번째 값은 state인데, 일종의 변수명이라고 생각하면 된다.
두 번째 값은 state를 변경해 주는 함수이다.

setName 함수가 호출돼서 name이 바뀌면 React는 해당 component를 다시 rendering한다.

useState 괄호 안엔 초기 값이 들어가면 된다.

import { useState } from "react";

export default function Hello() {
  const [name, setName] = useState("Mike"); // 배열 구조분해
  
  function changeName() {
    const newName = name === "Mike" ? "Jane" : "Mike";
    setName(newName);
  }
    
  return(
    <div>
      <h2 id="name">{name}</h2>
      <button onClick={changeName}>Change</button>

같은 component를 여러 개 사용하더라도 state가 각각 관리되며, 다른 state에 영향을 미치지 않는다.
ex. <Hello />를 여러 개 사용하는 상황에서 각 event가 해당하는 button에 의해서만 실행됨

---

6. props

props는 properties의 약자로서 속성 값이다.

아래의 code는 App.js가 Hello.js라는 component를 세 번 사용한 것이다.

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

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

export default App;

여기에서 만약 <Hello />에 함수를 입력하면 Hello.js 함수로 입력한 값이 전달된다.

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

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

export default App;

Hello.js에서 export default function Hello() { 부분을 export default function Hello(props) {로 수정해야 App.js에 있는 {age} 값을 받을 수 있다.

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>

이 상태에서는 Hello.js가 {age}를 App.js로부터 받은 것이기 때문에 props인 Hello.js에서는 {age}를 수정할 수 없다. (Read Only) Hello.js에서 age를 수정하려면 새롭게 state를 설정해 주어야 한다. ex. const [age, setAge] = useState(props.age);

---

7. mockup data, map

map()은 배열을 받아서 또 다른 배열을 반환한다.
배열 요소는 JSX로 작성하고 화살표함수로 바로 return문을 작성한다.

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

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

이때 개발자도구에서 Warning: Each child in a list should have a unique "key" prop.이라는 경고문이 뜨는데, 반복되는 요소에 key라는 고유한 요소를 입력하라는 뜻이다.
이를 위해 code를 이런 식으로 수정할 수 있다.

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

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

---

8. routing, useParams

react-router-dom

react-router-dom을 설치한 후 App.js에 다음과 같이 작성한다.

import { BrowserRouter, Route, Switch } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Header />
        <Switch>
          <Route exact path ="/" />
          <Route path="/day" />
        </Switch>
      </div>
    </BrowserRouter>
  );
}

<Switch /> 밖에 있는 것은 고정된 component이고, 안에 있는 것은 변동된다.
Route exact path ="" />로 작성하면 주소가 정확할 때만 page를 보여준다.
Route path ="/day" />로 작성하면 주소에 '/day'가 있으면 정확히 일치하지 않더라도 page를 보여준다.

useParams

useParams를 이용해 주소창에 있는 문자열이 입력된다.
<Route path="/day/:id">라고 입력하고 component에서 useParms를 import하면 URL이 같이 바뀐다. (${day} 부분)

import { useParams } from "react-router-dom";

export default function Day() {
  const { day } = useParams();
  
  useEffect(() => {
    fetch('http://localhost:3001/words?day=${day}`)
      .then(res => {
  		return res.json);
      }) ...

Link

HTML에서는 <a /> tag를 사용하지만, React Router는 <Link /> tag를 사용한다.
import를 한 후 사용해야 한다. import { Link } from "react-router-dom";
<Link to="/day">Day {day.day}</Link> 이런 식으로 작성한다.
이렇게 작성해도 개발작도구 Elements tab에는 <a />tag로 표기된다.

---

8. json server, RESTful API

json server

terminal에서 npm install -g json-server 이후 json-server --watch ./src/db/data.json --port 3001 하고 click하면 내가 editor에서 만든 mockup data가 뜬다.

REST API

REST API는 URI 주소와 method로 CRUD를 요청하는 것이다.

• CRUD와 method
  • Create : POST
  • Read : GET
  • Update : PUT
  • Delete : DELETE

URI만 보고도 어떤 요청인지 짐작할 수 있다.
ex. localhost:3002/words?day=1

이전까지 한 작업은 새로고침하면 원래대로 돌아왔지만, 지금부터 하는 작업은 data에 반영될 것이기 때문에 새로고침을 해도 원래대로 돌아가지 않는다.

---

9. API call

useEffect

useState와 마찬가지로 import해야 한다. import { useEffect, useState } from "react";

상태 값이 바뀌었을 때 동작하는 함수를 작성할 수 있다.
useEffect의 첫 번째 매개변수로 함수를 넣는데, 이 함수가 호출되는 timing은 rendering 결과가 실제 DOM에 반영된 직후이며 component가 사라지기 직전에도 마지막으로 호출된다.

useEffect의 두 번째 매개변수로 의존성배열을 넣는데, 의존성배열을 넣지 않으면 해당 함수가 다른 event가 진행될 때도 실시되기 때문이다.
의존성배열에 의도하는 함수명을 넣어 다른 이벤트 진행 땐 이 함수가 실행되지 않게 해주어야 동작에 무리가 없다.

useEFfect는 rendering 후 API를 호출할 때 사용하는데, 이때에는 의존성배열을 빈 배열로 비워둔다.

상태 값과 무관하게 rendering 직후 딱 한 번만 실행되는 작업을 빈 배열로 작성한다.

fetch

---

🔗 related documents

React 공식 문서

🙇 the source of this content

코딩앙마

---

---

---

---

from Nomad Coders

react hooks는 functional component에 state를 가질 수 있게 해줌
(원래는 class component만 가질 수 있었음)
react hooks을 사용하면 class component, CMD(componentDidMount), render 이런 것들을 안 해도 됨
모든 것이 하나의 function이 됨
결국 funtional programming style이 되는 것

hooks의 시초인 recompose
hooks의 공식 문서 hooks

useState

counting with class component

• class component가 필요
• state 필요
• state 정의 필요
• render 다음으로 패스 필요
• etc

import React, { Component } from "react";
class App extends Component {
	state = {
		count : 0
};
modify = (n) => {
	this.setState({
    count:n
    });
};
render() {
	const { count } = this.state;
	return (
            <>
            	<div>{count}</div>
            	<button onClick{() => this.modify(count + 1)}>Increment</button>
            </>;
       );
    }
}
export default App;

counting with hooks

• 더 간결함
• state를 다 따로 만들지 않아도 됨

import React, { Component, useState } from "react";
const App = () => {
	const [count, setCount] = useState(0);
    return (
    <>
    	{count}
        <button onClick={() => setCount(count + 1)}>Increment</button>
    </>
    );
};
export default App;

• useState는 value와 value를 변경하는 방법을 줌
• 변수를 배열로 정의한 이유는 useState가 주는 것이 array이기 때문 const [count(첫 번째 요소), setCount(두 번째 요소)]
• useState는 array를 return할 거고, 그 array의 첫 번째 요소는 value, 이 value는 0에서 시작함
• array의 두 번째 요소는 setCount
• 참고로 count, setCount 자리에는 아무 말이나 적어도 되지만 지금처럼 적는 게 convention임

class component에서는 react state management를 일일이 적어야 했는데
useState는 react state management 밑으로 들어가 hook을 땡기는 거야(?)

추가로 input을 만들어 보면

import React, { Component, useState } from "react";
const App = () => {
	const [count, setCount] = useState(0);
    const [email, setEmail] = useState("");
    const undateEmail = e => {
    	const {
        	target: { value }
        } = e;
        setEmail(value);
    };
    return (
    <>
    	{count}
        <button onClick={() => setCount(count + 1)}>Increment</button>
        <input placeholder="Email" value={email} onChange={updateEmail} />
    </>
    );
};
export default App;

useEffect

componentDidMount나 componentDidUpdate와 비슷함 (이것들은 주로 API 데이터를 요청할 때 사용함)

---

https://www.notion.so/wecode/React-Hooks-b07fdc9d5d82470492a0b4fa8e800c41

intro
함수 컴퍼넌트랑 훅스는 서로 다른 거임

클래스형 컴포넌트와 함수 컴포넌트의 특징과 hooks의 필요성 이해
hook는 2018년에 첫 공개
hook은 그냥 함수야

useState hook을 사용해 React의 컴포넌트의 상태를 관리
useEffect hook을 사용해 React 컴포넌트의 라이프사이클을 관리

기존 개념의 다른 표현일 뿐

(참고) Dan Abramov는 Create React 만든 사람이고, Facebook 개발자인데 useEffect에 대해 아주 상세히 설명해 놓았음

body hooks를 왜 써야 하는지? 공식 문서 필독 현업에서 많이 사용함

함수 컴포넌트는 state랑 lifecycle을 사용할 수 없음
hooks의 등장으로 함수 컴포넌트도 state와 lifecycle을 사용할 수 있게 됨
hooks를 사용하려면 함수 컴포넌트로 써야 함
클래스 컴포넌트랑 함수 컴포넌트 호환됨

컴포넌트는 라우트 기능 없지만 withRoute로 쓰잖아, 이것처럼

한 컴포넌트엔 lifecycle 하나만 들어올 수 있으니까 조건문 같은 것들을 하나의 method에 다 넣어야 했어
하지만 useEffect를 사용하면...

하압

기승전 useState...

이제 useEffect
useEffect도 함수
뒤에 소괄호 있음

useEffect(동작 function, 타이밍 Array)
를 아래에 비유하면

window.addEventListener("click", () => {
console.log("click!")
})

window.addEventListener(이벤트 종류(타이밍), 동작 function)

useEffect(() => {
console.log("trigger!!")
})