React입문 1주차(state)

State

State란 컴포넌트 내부에서 바뀔 수 있는 값을 의미하는 것으로 별도로 상태를 관리하는 것이다.

 

UI를 바꾸기 위해서 사용하는 것이다.(렌더링을 다시하기 위함으로 변경되야 하는 값들을 위해 사용하면 된다.)

---

State 만들기

State를 만들 때는 useState()를 사용한다. useState 는 state를 만들어주는 리액트에서 제공하는 기능입니다. 그래서 리액트에만 존재하는 개념이자 기능입니다. 그리고 앞으로 우리는 이것을 “기능” 이라고 하지 않고 “훅” 이라고 표현하겠습니다.

 

useState 훅을 사용하는 방식

const [ value, setValue ] = useState( 초기값 )

먼저 const 로 선언을 하고 [ ] 빈 배열 을 생성하고,

배열의 첫번째 자리에는 이 state의 이름, 그리고 두번째 자리에는 set 을 붙이고 state의 이름을 붙입니다.

그리고 useState( ) 의 인자에는 이 state의 원하는 처음값 을 넣어줍니다.

 

import { useState } from "react";
import "./App.css";

function App() { 

  // hook
  // 함수, initial Value로 초기값을 넣으면 
  // 초기값으로 생성된 state, 이 state를 다룰 수 있는 메서드(즉, state를 변경할 수 있는)를 가지고 있는 배열을 return
  useState("initial Value");
  [state, Setstate]
  
  return <div>STATE에 대한 이야기입니다.</div>
  
}
export default App

▼

import { useState } from "react";
import "./App.css";

function App() { 

  // hook
  // 구조분해할당으로 표현
  const [state, Setstate] = useState("initial Value")
  
  return <div>STATE에 대한 이야기입니다.</div>
  
}

export default App

import { useState } from "react";
import "./App.css";

function App() { 

  // useState hook이다.
  const [count, setCount] = useState(0);
  const [todoList, setTodoList] = useState([]);

  return <div>STATE에 대한 이야기입니다.</div>
  
}

export default App

---

// src/App.js
import { useState } from "react";
import "./App.css";

function App() { 

  // useState hook 생성
  const [name, setName] = useState("김할아버지")

  // 멀티라인인 경우 소괄호로 감싸주기, 한줄이면 없어도 된다.
  return (<div>
    {name}
    <br/>
    <button onClick={function(){
      alert('Hello')
    }}>클릭</button>
  </div>)
  
}

export default App

> onClickHandler 라는 함수를 만들고 onClick={ } 에 넣어주었다. React에서는 이러한 방식으로 함수와 컴포넌트(button 태그)를 연결시킨다. 

---

// src/App.js
import { useState } from "react";
import "./App.css";

function App() { 


  const [name, setName] = useState("김할아버지")

  // 멀티라인인 경우 소괄호로 감싸주기, 한줄이면 없어도 된다.
  return (<div>
    {name}
    <br/>
    <button onClick={function(){
      setName("박할아버지")
    }}>클릭</button>
  </div>)
  
}

export default App

> state를 하나 만듭니다. 그리고 이 버튼을 클릭을 했을 때 state 값을 바꿔본다.

> 이벤트 핸들러를 만들어주고 그 안에 setName 을 넣어준다.

> 버튼을 누르면 setName()안에 있는 값이 “박할아버지”니까, state가 “김할아버지"에서 “박할아버지”로 바뀐다.

---

// src/App.js
import { useState } from "react";
import "./App.css";

function App() {

  const [fruit, setFruit] = useState("")

  // 멀티라인인 경우 소괄호로 감싸주기, 한줄이면 없어도 된다.
  return (
    <div>
      과일: {' '} 
      <input
        value={fruit}  // 입력되는 값이 뭔지
        // 타이핑이 일어날때 어떻게 할 것인지, onChange에는 event가 같이 옴, 
        // event객체 안에 있는 target객체안의 value 값으로 input받은 값이 들어옴
        onChange={function (event) {  
          setFruit(event.target.value)
        }} />
      <br /><br />
      {fruit}
    </div>
  );

}

export default App

---

// src/App.js
import { useState } from "react";
import "./App.css";

function App() {

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

  console.log(id);
  console.log(pw);

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

  // pw필드가 변경될 경우
  const onPwChangeHandler = (event) => {
    setPw(event.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

> 사용자가 input에 어떤 값을 입력하면, 그 값을 입력할 때마다, 같은 말로 onChange될 때마다 value라는 state에 setValue해서 넣어주는 것

> 이벤트 핸들러 안에서 자바스크립트의 event 객체를 꺼내 사용할 수 있습니다.

> 사용자가 입력한 input의 값은 event.target.value 로 꺼내 사용할 수 있죠.

> 마지막으로 state인 value를 input의 attribute인 value에 넣어주면 input과 state 연결하기, 끝 

---

불변성

https://miimee.tistory.com/80

JavaScript 문법 종합 3주차(데이터타입_심화1)

불변성이란 메모리에 있는 값을 변경할 수 없는 것을 말합니다.

 

자바스크립트의 데이터 형태 중에 원시 데이터(숫자, 문자, blooean...)는 불변성이 있고, 원시 데이터가 아닌 객체, 배열, 함수는 불변성 없습니다.

---

왜 리액트에서는 원시데이터가 아닌 데이터의 불변성을 지켜주는 것을 중요시할까?

 

리액트에서는 화면을 리레더링 할지 말지 결정할 때 state의 변화를 확인합니다. state가 변했으면 리렌더링 하는 것이고, state가 변하지 않았으면 리렌더링을 하지 않죠.(단순 변수는 무시한다.)

 

그때, state가 변했는지 변하지 않았는지 확인하는 방법이 state의 변화 전, 후의 메모리 주소를 비교합니다.

 

그래서 만약 리액트에서 원시데이터가 아닌 데이터를 수정할 때 불변성을 지켜주지 않고, 직접 수정을 가하면 값은 바뀌지만 메모리주소는 변함이 없게 되는것이죠.

 

그래서 즉, 개발자가 값은 바꿨지만 리액트는 state가 변했다고 인지하지 못하게 됩니다. 그래서 결국 마땅히 일어나야 할 리렌더링이 일어나지 않게되죠.

---

리액트 불변성 지키기 예시

 

배열을 setState 할 때 불변성을 지켜주기 위해, 직접 수정을 가하지 않고 전개 연산자를 사용해서 기존의 값을 복사하고, 그 이후에 값을 수정하는 식으로 구현합니다. 즉, 새로운 객체를 생성해야한다. (spread, map, fillter등등)

import React, { useState } from "react";

function App() {
  const [dogs, setDogs] = useState(["말티즈"]);

  function onClickHandler() {
		// spread operator(전개 연산자)를 이용해서 dogs를 복사합니다. 
	  // 그리고 나서 항목을 추가합니다.
    setDogs([...dogs, "시고르자브르종"]);
  }

  console.log(dogs);
  return (
    <div>
      <button onClick={onClickHandler}>버튼</button>
    </div>
  );
}

export default App;