useState(props)데이터 값 넘기기

이번에 공부하면서 영화예매 페이지에서 클릭 시 해당 벨류값을

전부 받아서 계속해서 쌓은다음 넘기는 것을 해야했는데

그때 사용한 방법을 기억할 수 있게 정리해보려고한다

우선 여기서 내가 사용한 방법은 총2가지로 볼 수있다

첫번째는 props이고

두번째는 useState이다

axios로 서버로부터 받아온 데이터를 클릭했을 때 useState에 담아서

배열로 계속해서 값을 넣어준다음 해당 값을 넘기는 것을 하려고한다

리액트는 부모가 가진 값을 자식한테 넘겨주는 것이 순서인데

나는 티켓팅이라는 js파일안에 3개의 js파일을 import해서 사용중이고

해당js파일에 각 데이터를 넘겨줄 것인데 방법은 props를 사용할 예정이다

그리고 props로 받은 데이터를 useState로 저장해서 뿌려진 값을 담아볼 생각이다

우선 아래코드를 보자

 const [input,setInput]=useState([]);

    const changeData=(e)=>{
        let {name,value}=e.target;
        setInput({
                ...input, //기존의 inputs 객체 복사해서 넣음(펼침 연산자)
                [name]:value //name키에 입력값넣기
            }
        )
    }

    useEffect(()=>{
        console.log(input);
    },[input]);

이렇게 useState를 만들고

아래에 함수 changeData를 만들었다

name과 value를 만들고 e.target 즉 클릭 한 것에

name과 value를 담을 생각이다

그리고 set Input안에 이전에 받았던 데이터를 넣고 펼쳐주고

다시 네임과 벨류를 찾아서 넣어주는 방식으로 진행 할 생각이다

해당 import된 파일에 데이터를 넘겨줄 때는

input={input} setInput={setInput} changeData={changeData} 이런식으로

데이터이름과 값을 넘겨주면 된다

던졌으면 이제 받아봐야하는데

받는 방법은 이러하다

const Location = (props) => {
const [mloc,setMloc] = useState(Array.from({length:5}));
const {input,setInput,changeData}=props;

지금보면 괄호안에 props라고 적어줬다

props로 받겠다는 것이고

아래에 const로 받은 데이터를 나열해줬고 = props라고 해서 props로 받은것들이라고 적어줬다

import React, {useState} from 'react';
import './Location.css';
const Location = (props) => {
    const [mloc,setMloc] = useState(Array.from({length:5}));
    const {input,setInput,changeData}=props;

    return (
        <div>
            {mloc.map((list,i)=>(
                <ul>
                    <li style={{listStyle:'none'}}>
                <button key={i} value={i+1} style={{fontSize:'15px'}} className={'lcbtn'} name={'location'} onClick={changeData}>DB에서 받을 극장리스트</button>
                    </li>
                </ul>
            ))}
        </div>
    );
};

export default Location;

전체코드는 이렇게 되어있는데

보면 제일 위에서 데이터를 받고 데이터를 사용해야하니까 한번 더 선언해주고 그 데이터를

아래에 버튼을 onClick이벤트로 함수를 사용해주는 형식으로 쓰고있다

이러한 작동방식에 대해 이해하고 있으면 응용해서 데이터를 넘겨주고 받아오고를

더 쉽고 간단하게 할 수 있게된다

이렇게 흩어진 컴포넌트에 전부 데이터를 뿌려줘서 해당 컴포넌트에서 값을 클릭 시

해당하는 value값을 받아서 사용할 수 있게 되었다

유레카!