2023.02.25) 항해 20일차

어제 보던 강의를 마저 보았다.

생각보다 많이 어렵지는 않았다. 강의를 보며 차근차근 손코딩 해보며 이해하니까 생각보다 수월했다.

이 전에 css작업도 해보고 순수 자바스크립트 작업도 해보아서 아직까지는 괜찮다!!

 

1) State

State란 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.

name이라는 정보를 const name = “ ”; 으로 만들었는데,

만약 name이라는 값이 바뀌어야만 하는 정보였어야 했다면 state로 생성한다.

State를 만들 때는 useState()를 사용한다.

useState 라는 함수를 이용해서 state를 만든다.

useState 는 state를 만들어주는 리액트에서 제공하는 기능이고, “훅”이라고 부른다.

 

① useState 훅을 사용하는 방식

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

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

useState( ) 의 인자에는 이 state의 원하는 처음값 을 넣어준다.

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

// state 사용 예시
import React, { useState } from 'react'

function App() {
  const [id,setId]=useState("")
  const [password,setPassword]=useState("")
  return (
    <div>
      아이디:
      <input 
        type="text" value={id}
        onChange={function(event){
          setId(event.target.value);
        }}
      />
      <br/>
      비밀번호:
      <input
        type="password" value={password}
        onChange={function(event){
          setPassword(event.target.value);
        }}
      />
      <br/>
      <button onClick={() => {
        alert(`입력한 아이디는 ${id}이며, 비밀번호는${password}입니다.`);
        setId('');
        setPassword('');
      }}> 로그인</button>
    </div>

  )
}

export default App

 

2) 불변성

리액트는 화면을 렌더링할지를 state의 변화에 따라 결정하고, 단순 변수는 무시한다.

(리액트에서 렌더링이란, 컴포넌트가 현재 props와 state의 상태에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업이다.)

원시 데이터가 아닌, 객체나 배열 등은 스프레드 문법이나 map, filter 등 불변성을 지켜주는 방법을 사용해서 처리한다.

원시데이터는 수정을 했을 때 메모리에 저장된 값 자체는 바꿀 수 없고,

새로운 메모리 저장공간에 새로운 값을 저장한다.

원시데이터가 아닌 데이터는 수정했을 때 기존에 저장되어 있던 메모리 저장공간의 값 자체를 바꿔버린다.

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

리액트에서 원시데이터가 아닌 데이터를 수정할 때 불변성을 지켜주지 않고,

직접 수정을 가하면 값은 바뀌지만 메모리주소는 변함이 없게 되어버려 문제가 생기는 것이다.

배열을 setState 할 때 불변성을 지켜주기 위해 직접 수정을 가하지 않고 전개 연산자를 사용해서,

기존의 값을 복사하고 그 이후에 값을 수정하는 식으로 구현한다.

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

function App() {
  const [fruit = ["딸기", "수박", "망고", "복숭아", "사과"]]
  return (
    <div className='body'>
      {fruit.filter(function(item){
        return item !== '망고';
      })
      .map(function(item){
        return <div className='box'>{item}</div>
      })}
    </div>
  )
}

export default App

 

 

실습을 해보며 삭제버튼도 구현해보고 컴포넌트를 분리도 해보았다.

//삭제버튼
const clickDeleteBoxHandler = (id) => {
  const newUser = user.filter(person => person.id !== id);
  setUser(newUser);
}

const Button =({clickAddBoxHandler}) => {
  return <button onClick={clickAddBoxHandler}>추가</button>;
};

export default Button;

// 분리한 컴포넌트를 연결하였다.
import React, { useState } from 'react'
import "./App.css";
import Button from 'components/Button';
import User from 'components/User';