프론트엔드7-8.[React] hook

*Hook은 React 버전 16.8부터 React의 요소로 추가되었다.*

Hook:  기존 Class 없이 React의 기능을 사용할 수 있게 해준다.  

• hook은 데이터를 유동적으로 바꿀 수 있다. 
• userState 함수는 현재의 state 값과 이 값을 업데이트하는 함수를 쌍으로 제공한다.
• hook은 React의 useState 훅을 사용하면 함수의 데이터 상태를 추적할 수 있다.
• Hook을 사용하기 위해서는 밑의 구문을 import 해줘야 한다. 

import React, {useState} from 'react';

---

1. hook을 사용(버튼을 누르면 색과 성별이 변경된다. )

import React, {useState} from 'react';

function App() {

	// hook을 셋팅
  const [color, setColor] = useState("pink");
  const [gender, setGender] = useState("male");

  return (
    <div>
      <h2>Color: {color}, gender: {gender} </h2>
      <button onClick={()=> setColor("skyblue")}>컬러변경(skyblue)</button>
      <button onClick={()=> setGender("female")}>성별변경</button>
    </div>
  );
}

export default App;

 

버튼을 누르면 컬러와 성별이 바뀜

---

2. 배열을 이용해 반복문을 처리한다. 

• map()함수를 이용해서 배열의 반복처리 {배열명.map()} 

import React, {useState} from 'react';

function App() {

  // 배열로 생성
  const favThing = ["dog","nature","swimming","family","friends","tea"]

  function FavThings(props){
    return <li>내가 좋아하는 것: {props.favThingName}</li>
  }

  return (
    <div>
      <h2>배열을 반복문처리</h2>
      <ol> 
          {favThing.map((f)=><FavThings favThingName={f}/>)}
      </ol>
    </div>
  );
}

export default App;

• 배열의 내용들이 (f)로 들어가고 favThingName의 매개변수로 다시 들어간다. 

---

3. Hook을 사용한 또다른 예제

예제1) hook으로 여러개의 데이터를 생성

import React, {useState} from 'react';  // hook을 사용하기 위해서 

  function Test(){
    
    const [myInfo, setMyInfo] = useState({
            username:'홍길동',
            tel:"010-4567-8956",
            addr:"서울시",
            email:"abcd@naver.com"
    });
    
    return(
      <div>
        <ol>
            <li>이름 : {myInfo.username}</li>
            <li>연락처 : {myInfo.tel}</li>
            <li>주소 : {myInfo.addr}</li>
            <li>이메일 : {myInfo.email}</li>
        </ol>
      </div>
    );
  }

  export default Test;

---

예제2-1) 연락처를 변경하는 버튼을 생성

 <button onClick={()=> setInfo({tel: '010-1234-5678'})}>연락처변경</button>

• 데이터 중 1개만 수정하면 나머지 데이터는 초기화된다.

예제2-2) 기존 데이터를 저장하면서 새로운 데이터가 수정되는 함수를 생성

import {useState} from 'react';

  function Test(){
    
    const [myInfo, setInfo] = useState({
					...
    });
    
    // 나머지 데이터를 저장
    const updateInfo = () =>{
          setInfo( prevdata =>{
              return {...prevdata, addr:"하남시", email:'efgh@naver.com'}
          });
    }

    return(
      <div>
        <ol>
            <li>이름 : {myInfo.username}</li>
            <li>연락처 : {myInfo.tel}</li>
            <li>주소 : {myInfo.addr}</li>
            <li>이메일 : {myInfo.email}</li>
            
            <button onClick={updateInfo}>일부정보변경</button>
        </ol>
      </div>
    );
  }

  export default Test;

예제2-3) 기존 데이터를 저장하면서 새로운 데이터가 수정되는 함수를 생성(매개변수로 받음)

import {useState} from 'react';

  function Test(){
    
    const [myInfo, setInfo] = useState({
            username:'홍길동',
            tel:"010-4567-8956",
            addr:"서울시",
            email:"abcd@naver.com"
    });
    
    const updateInfo = () =>{
          setInfo( prevdata =>{
              return {...prevdata, addr:"하남시", email:'efgh@naver.com'}
          });
    }

    const updateInfo2 = (idx, data)=>{
          setInfo(i =>{
                if(idx==1){
                  return {...i, username:data};
                } 
                if(idx==2){
                  return {...i, tel:data};
                }
                if(idx==3){
                  return {...i, addr:data};
                } 
                if(idx==4){
                  return {...i, email:data};
                }
          });
    }

    return(
      <div>
        <ol>
            <li>이름 : {myInfo.username}</li>
            <li>연락처 : {myInfo.tel}</li>
            <li>주소 : {myInfo.addr}</li>
            <li>이메일 : {myInfo.email}</li>
            <button onClick={updateInfo}>일부정보변경</button>
            <hr/>
            <button onClick={()=> updateInfo2(1, '이길동')}>이름변경</button>
            <button onClick={()=> updateInfo2(2, '010-3333-5959')}>연락처변경</button>
            <button onClick={()=> updateInfo2(3, '부산')}>주소변경</button>
            <button onClick={()=> updateInfo2(4, 'hehey@nate.com')}>이메일변경</button>
        </ol>
      </div>
    );
  }

  export default Test;

---

https://ko.reactjs.org/docs/hooks-overview.html

Hook 개요 – React