리액트 입문주차 1주차 - 4

1.  State

ⅰ. State

• State란?
  • State란 컴포넌트 내부에서 바뀔 수 있는 값을 의미
  • State의 목적 - UI(엘리먼트)로의 반영을 위해서 

❓ hook이란?
-  React에서 제공하고 있는 함수
  => React의 api
- React안에서 어떤 특정한 기능을 수행하는 것들을 hook이라고 함

• State만들기
  • State를 만들 때는 useState()를 사용
  • useState() 괄호안에는 초기값을 입력하면 됨
  • 배열 형태로 2가지를 리턴해줌 ex) [state, setState]
    => 이값을 구조분해할당을 이용하여 useSate로 받게 만듦\

  const [count, setCount] = useState(0)  // 숫자형 초기값
  const [todoList, setTodoList] = useState([])  // 배열의 초기값

ⅱ.  useState + onClick Event

• Button을 만들고 그것을 클릭했을 때 state를 변경하게 만들기

import React, { useState } from "react";

const App = () => {
  const [name, setName] = useState("김할아버지")
  const handleOnclick = () => {
    setName("박할아버지")
  }

  return (
    <div>
      {name}
      <br />
      <button onClick={handleOnclick}>클릭</button>
    </div>
  );
};

export default App;

ⅲ.  useState + onChange Event

• input을 만들고 입력했울 때 state를 변경하게 만들기
  • onChange 이벤트에서는 value값을 같이 입력해줘야하는데 vlaue값은 여기에 입력되는 값이 무엇인지를 보여줌
  • onChange는 필드 안에서 어떠한 변화가 일어날때 그 변화를 감지하는 이벤트
  • onChange 속성에서는 event가 중요!! 항상 event가 매개변수로 딸려오게됨
    => event는 객체형태로의 값을 받는데 여기서 가장 중요한것은 target
  • event.target.value안에 우리가 타이핑 하는 값들이 매개변수로 들어오게됨

import React, { useState } from "react";

const App = () => {
  const [fruits, setFruits] = useState("");
  const handleOnChange = (e) => {
    setFruits(e.target.value)
  };

  return (
    <div>
      과일{" "}
      <input
        value={fruits} 
        onChange={handleOnChange} 
      />
      <br />
      <br />
      {fruits}
    </div>
  );
};

export default App;

ⅳ.  아이디 비밀번호 입력한 값 alert창으로 보여주기

• 내가 작성해본 코드

import React, { useState } from "react";

const App = () => {
  const [form, setForm] = useState({
    id: "",
    pw: "",
  });
  const handleInputOnChange = (e) => {
    setForm({
      ...form,
      [e.target.name]: e.target.value,
    });
  };
  const handleSubmitOnChange = () => {
    alert(
      `고객님이 입력하신 아이디는 ${form.id}이며, 비밀번호는 ${form.pw}입니다.`
    );
    setForm({
      id: "",
      pw: "",
    });
  };

  return (
    <div>
      <div>
        아이디 :
        <input
          name="id"
          value={form.id}
          onChange={handleInputOnChange}
          type="email"
        />
      </div>
      <div>
        비밀번호 :
        <input
          name="pw"
          value={form.pw}
          onChange={handleInputOnChange}
          type="password"
        />
      </div>
      <input type="submit" value="로그인" onClick={handleSubmitOnChange} />
    </div>
  );
};

export default App;

• 강의에서 알려준 코드

import React, { useState } from "react";

const App = () => {
  const [id, setId] = useState("");
  const [pw, setPw] = useState("");

  // id 필드가 변경될 경우
  const onIdChangeHandler = (e) => {
    setId(e.target.value);
  };

  // pw 필드가 변경될 경우
  const onPwChangeHandler = (e) => {
    setPw(e.target.value);
  };

  return (
    <div>
      <div>
        아이디 : <input type="text" value={id} onChange={onIdChangeHandler} />
      </div>
      <div>
        비밀번호 :{" "}
        <input type="password" value={pw} onChange={onPwChangeHandler} />
      </div>
      <button
        onClick={() => {
          alert(
            `고객님이 입력하신 아이디는 ${id}이며, 비밀번호는 ${pw}입니다.`
          );
          setId("");
          setPw("");
        }}
      >
        로그인
      </button>
    </div>
  );
};

export default App;

• 주의할점!!! 
  onClick등 이벤트 안에 함수를 넣을때 함수명()으로 작성하면 안되고  함수명만 작성해야함
  ❓ why?? 
  함수명()으로 하면 함수를 바로 즉시 호출하는 것이기 때문
  바로 호출을 하고 싶다면 화살표 함수로 한번 함수를 감싸줘야함

2. 불변성

ⅰ.  불변성이란?

• 메모리에 있는 값을 변경할 수 없는 것을 말함
• 자바스크립트의 데이터 형태중에 원시 데이터는 불변성이 있고, 원시 데이터가 아닌 객체, 배열, 함수는 불변성이 없음

ⅱ.  변수를 저장하면 메모리에 저장되는 방법

• 원시데이터 저장방법(숫자, 문자, boolean 등)

const number = 1;
const secondNumber = 1

console.log(number === secondNumber)

• 배열, 객체, 함수등

const obj1 = {
  name: "kim",
};

const obj2 = {
  name: "kim",
};
console.log(obj1 === obj2); // false

ⅲ. 데이터를 수정하면?

• 여기서 나오게 되는것이 불변성
• 원시 데이터

let number = 1;
let secondNumber = 1;

number = 2;

• 원시데이터가 아닐 경우

let obj1 = {
  name: "kim",
};
obj1.name = "park";  // 객체는 불변성이 없음

let obj2 = {
  name: "kim",
};

📚 원시데이터는 수정을 했을때 저장된 값을 바꿀수는 없고, 새로운 메모리 저장 공간을 만들어서 바라보게함
원시데이터가 아닌경우 데이터가 저장된 공간을 바꿔버리기 때문에 불변성이 없음.

ⅳ.  리액트에서는 원시데이터가 아닌 데이터의 불변성 지켜주는것이 중요한 이유

import React, { useState } from "react";

const App = () => {
  let count = 0;
  const [input, setInput] = useState("");

  return (
    <div>
      <input
        type="text"
        value={input}
        onChange={(e) => {
          setInput(e.target.value);
        }}
      />
      <button
        onClick={() => {
          count++;
          console.log(`count는 ${count}입니다.`);
        }}
      >
        증가
      </button>
      {count}
    </div>
  );
};

export default App;

• 위에 코드르 보면 숫자는 증가되고 있지만 실질적으로 화면에 보여주는 count는 변하지 않고 있음
• state값은 변하면 setState를 해주면서 재할당을 해줌 => 리액트가 state를 바뀜을 인지하고 화면을 다시 그려줌
  ==> 이것이 바로 rendering!!
• react는 화면을 렌더링 할지를 state의 변화에 따라 결정함, 단순변수는 무시함!!!!

 

• 불변성을 지켜주는 여러가지 방법을 이용하여 원시 데이터가 아닌 것들을 처리하는 방밥

import React, { useState } from "react";
const App = () => {
  const [obj, setObj] = useState({
    name: "wonjang",
    age: 21,
  });
  return (
    <div>
      <div>{obj.name}</div>
      <button
        onClick={() => {
          // 새로운 객체를 만들어줘야함
          // 완전히 다른 주소를 바라보게 해야함
          obj.name = "twojang";
          setObj(obj);
        }}
      >
        변경
      </button>
    </div>
  );
};

export default App;

• 객체나 배열에서 변경된 값을 렌더링 하여 보여줄수 있게 하기 위해서는 스프레드 문법 또는 map이나 filter를 사용해주어야 함

      <button
        onClick={() => {
          obj.name = "twojang";
          const obj2 = { ...obj };
          setObj(obj2);
        }}
      >

3. 순수함수

ⅰ.   순수함수란?

• 하나 이상의 인자를 받고, 인자를 변경하지 않고, 참조하여 새로운 값을 반환하는 함수
• 같은 input동일한 인자가 전달되면 항상 동일한 결과를 반환하는 함수 

// 매개변수를 복사한 값을 변경하는 순수함수
const addSixPure = (arr) => {
  // 펼침 연산자로 새로운 배열에 6 추가
  newArr = [...arr, 6];
  return newArr;
};

// 순수함수가 아닌것
const num_arr = [1, 2, 3, 4, 5];

// 매개변수의 값을 직접 변경하는 불순함수
const addSixImpure = (arr) => {
  // 매개변수에 직접 6 추가
  arr.push(6);
  return arr;
};

❗ 리액트에서 순수함수가 필요한이유

• 컴포넌트의 많은 루틴을 순수 함수로서 작성하기를 요구하고 있음
  • 컴포넌트에서 state와 props가 같으면, 항상 같은 값을 반환해야함
  • 다른 Side effects를 발생시키지 않아야함(HTTP요청, 데이터 저장, 쿠키 조작등)
• 컴포넌트의 상탯값은 불변 객체(Immutable Object)로 관리해야 함
  • 수정할 때에는 기존 값을 변경하는 것이 아니라, 같은 이름의 새로운 객체를 생성함
• 이를 통해 UI개발의 복잡도를 낮추고 버그 발생 확률을 줄임