react Hook함수(1) State(2)

if문 만큼 많이 사용되는 것들이

- map

- find

- filter

가 있습니다

 

백엔드를 받아오는 데이터의 형식은 대부분이 배열인 경우가 많습니다. 따라서 이러한 배열들을 화면에 

보여주기 위해 사용하는 함수들입니다.

(그래서 배열일 경우에만 사용이 가능하다)

 

 

1. map

    [반복문, 한줄 씩 읽어오는 것]

         => 주로 배열의 길이만큼 반복할 때 사용

	ex)
        배열명.map((결과값 변수명) => ( 실행문 ))


        ex)  실행문의 경우
        state.map((item) => console.log(item.id))

        (id만 넣었으므로 name은 안오고 id값 1,2,3 만 들어온다)


        ex) HTML 반복의 경우
         state.map((item) = 
         (
            <div>
                <div></div>
            </div>
         ))

         (백엔드의 데이터를 가져올때 데이터가 배열로 오기 때문에 데이터를 담아야한다)

 

 

2. find / findIndex

 검색, 조건에 맞는 데이터를 읽어오는 것으로, 주로 배열 내에 주건식을 만족하는 값 / 인덱스를 백엔드에 전달하기 위해 찾아올 때 사용합니다

        ex)
         배열명.find((결과값 변수명) => 조건식 )


        ex)
         state.find((item) => item.id === 1).name  
         (id가 1이랑 같은 객체의 name값을 불러오기 때문에 "문미새" 가 출력)


        ex)
         state.findIndex((item) => item.id === 1)  
         (1번의 문미새를 뽑아오려면 객체 반환이 아니라 인덱스번호 반환이라 
         state[0].name 으로 0번째 배열에 있는 1과 같은 객체를 찾아와라 해서 
         문미새를 가져오게 됩니다)

 

 

3. filter

 거름망, 조건에 맞는 데이터를 제외하고 읽어오는 것

주로 백엔드에서 데이터가 삭제되었을 때 프론트엔드에서도 삭제하기 위해 사용합니다

 

백엔드에서 데이터를 10개를 보냈을 때, 프론트엔드에서 데이터 1개를 빼달라고 백엔드로 보내면

프론트엔드에선 그대로 10개로 저장이되고 백엔드에서만 9개로 저장이 되기 때문에

백엔드에 다시 데이터를 요청하지 않아도 그대로 9개로 보일 수 있게 하는게 필터의 역할입니다

ex)
 배열명.filter(( 결과값 변수명 ) => 조건식 )

 

------------------------------------------------------------------------------------------------------------------------------------------------

 

다음 AddState.js 라는 파일을 src에 하나 만들겁니다

const AddState = () => {
	return (
    	<>
    		<input
            	type="text"
                placeholder="이름을 입력하세요"
            />
            <button onClick={onClickEvent}>추가</button>
            <button>초기화</button>
        </>
    );
}
export default AddState

이제 state의 값을 추가하는 함수를 AddState에 전달하기 위해 onClickEvent를 객체로 추가해줍니다

 

이전 글에 있던 이 코드의  onClickEvent를 연결해준겁니다

하지만 onClickEvent객체는 매개변수를 두개를 받아야 하기 때문에 addState파일에 함수를 하나 더 만들어줍니다

 

const onAddStateHandler = () => {
	onClickEvent(idValue, nameValue)
}

idValue는 state에서 객체가 추가가 되야하기 때문에 마지막 인덱스값에 +1을 해주는 Value값입니다

nameValue는 input에 이름을 입력할 때에 button 입력시의 Value값입니다

 

인덱스값은 배열이기 때문에 기존의 길이에서 -1을 해줘야하기 때문에(배열은 0부터 시작) 코드를 작성하고

state.js의 리턴값에 AddState에 onClickEvent를 사용해야 해서

<AddState onClickEvent={onClickEvent}/> 코드를 작성해줘야합니다

return (
    <>
      {state.map((item, index) => (
        <div key={item.id}>
          {item.id}. {item.name}
          <button>삭제</button>
        </div>
      ))}
      <AddState
        onClickEvent={onClickEvent}
        stateId={userList.length > 0 && state[state.length - 1].id}
      />
    </>
  );

나중에 삭제 버튼도 사용해 봐야 해서 length가 0이면 읽을 수 없기 때문에 0보다 큰 경우를 넣어줍니다

 

이제 stateId값을 사용해야 하기 때문에 addState.js의 onAddStateHandler 변수에 stateId값을 추가해줍니다

그리고 그 값을 idValue에 +1을 해서 넣어주면 됩니다(추가시 마지막 값 다음에 추가를 해야하기 때문)

const onAddStateHandler = () => {
        onClickEvent(stateId + 1, nameValue);
    }

 

 

const AddState 에도 onClickEvent와 stateId의 객체를 등록해줘야 합니다

const AddState = ({onClickEvent, stateId}) => {

input 값이 바뀔때마다 세팅을 해주려고 코드를 추가합니다

const [name, setName] = useState('');

 

name값을 넣어주기 위해 onAddStateHandler의 nameValue 대신에 name을 넣어줍니다

(' ')  <-- 기본값은 스트링 형식으로 넣어줍니다. 왜냐면 input타입의 Value에는 null값을 넣지 못하기 때문입니다

 

 

이 함수는 이벤트가 일어나면 일어나는 객체의 Value값을 name이라는 state에 세팅하는 함수입니다

const onChangeInput = (e) => {
        setName(e.target.value);
    }

 

 

함수를 추가했으니 return값에도 넣어줘야죠

<input 
    type="text"
    placeholder="이름을 입력하세요"
    value={name}
    onChange={onChangeInput}
/>

 

 

< 전체적인 addState.js >

import { useState} from "react";

const AddState = ({onClickEvent, stateId}) => {
    const [name, setName] = useState('');
    
    const onChangeInput = (e) => {
        setName(e.target.value);
    }

    const onAddStateHandler = () => {
        onClickEvent(stateId + 1, name);
    }

    return (
      <>
        <input 
            type="text"
            placeholder="이름을 입력하세요"
            value={name}
            onChange={onChangeInput}
        />
        <button onClick={onAddStateHandler}>추가</button>
        <button}>초기화</button>
      </> 
    );
}
export default AddState

이제 터미널에 "npm start" 로 웹브라우저로 리액트를 실행시켜보면

작동이 잘되는걸 볼 수 있습니다

 

*요약

state의 객체들을 등록해 AddState에서 name을 입력해 추가 버튼을 클릭시 input값의 Value값이 onClickEvent로 e값으로 들어와 리턴해주는거죠

그리고 리턴한 값을 Hook.js에 입력되어 Hook함수가 입력된 App.js를 웹브라우저로 출력해 결과값이 나옵니다

 

리액트에서 state가 큰 비중을 차지한다 하여 범위가 굉장히 넓은 것 같습니다..

이해하기도 너무 어렵고 매개변수로 인해 함수끼리 서로 연결되어 코드 자체가 너무 헷갈려 이해하고 응용하려면 아직 멀었네요. 열심히 따라가겠습니다