Context 3

Parent.js

import React, {useState} from "react";

//외부에서 만든 Context 객체를 import해서 가져와 사용
import UserContext from "./UserContext";
import Child from "./Child";


//부모 컴포넌트
const Parent = () => {

    //상태변수 userList, setUserList
    //userList 초기값 빈 배열 공간으로 설정
    const [userList, setUserList] = useState([]);
    //userList : 빈 목록
    //setUserList : 추가될 유저 리스트

    return(
        <UserContext.Provider value={{userList, setUserList}}>
            <Child/>
            <div>
                {/* child에서 추가한 user 정보 보여주는 공간 */}
                {userList.map((user, index) => {
                    return(
                        <ul key={index}>
                            <li>index : {index}번 째 유저</li>
                            <li>name : {user.name}</li>
                            <li>age : {user.age}</li>
                        </ul>
                    )
                })
                }
            </div>
        </UserContext.Provider>

    )
}
export default Parent;

 

- userList : 초기에 저장된 유저목록을 보여줌
- 추가되는 유저리스트는 map에 담겨 보여짐
** map = key, value (유저의 inputName, inputAge에 담긴 값 전달)
저장이 된 값에 index(번호)를 매겨 순서대로 기록

0번째
    inputName = "홍길동" = "name" 이라는 이름으로 홍길동 이름이 저장
    inputAge = 12 = "age"라는 이름으로 12라는 숫자가 저장
1번째
    inputName = "고길동" = "name" 이라는 이름으로 고길동 이름이 저장
    inputAge = 15 = "age"라는 이름으로 15라는 숫자가 저장

 

 

배열.map((요소, index) =>{
    return(
        얻어온 값 확인하기
    )
})
- 배열의 각 값을 순서대로 하나씩 얻어와 return에 전달
- return에서는 하나씩 얻어온 값들을 모두 모아서 새로운 배열을 반환

index는 자동으로 0부터 번호매김이 시작되는 값이기 때문에 다른 코드와 관련이 없음 -> 단순 번호매김

 

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

 

Child.js

import React, {useState, useContext} from "react";

//외부에서 만든 Context 객체를 import해서 가져와 사용
import UserContext from "./UserContext";

const Child = () => {
    //Context로 제공받은 값 가져오기
    //Context로 전달받은 객체 : {"userList" : userList, "setUserList" : setUserList}
    //전달 받은 값의 key 값을 변수명과 일치하게 작성해서 알아서 들어올 수 있도록 함
    const {userList, setUserList} = useContext(UserContext);
    

    //자식에서 컴포넌트 상태 변수 선언
    const [inputName, setInputName] = useState('');
    const [inputAge, setInputAge] = useState(0);

    const 사용자추가하기 = () => {
        //상태변수값을 이용해서 user 객체생성
        //const user = {"부모에전달할변수명" : 부모에전달할값};
        const user = {"name" : inputName, "age" : inputAge};      

        // userList 복사 = ...userList(기존유저리스트) + 유저데이터 추가
        // ...변수명 = 변수명에 담긴 모든 값을 복사
        //기존의 내용을 복제하고 복제한 리스트에 새로운 유저를 추가, 덮어쓰기
        const newUser = [...userList, user]; 
        
        //새로운 유저가 추가된 리스트로 변경
        setUserList(newUser);
    }
    return(
        <div>
            <label htmlFor="inputId">이름</label>
            <input type="text" id="inputId" onChange={(e) => {setInputName(e.target.value)}} value={inputName}/>
            <label htmlFor="inputAge">나이</label>
            <input type="number" id="inputAge" onChange={(e) => {setInputAge(e.target.value)} } value={inputAge}/>
            
            {/* 
            e(움직임감지).target(움직임이일어난곳).value(값을가져옴)

            value={inputName} = 초기값 = useState('')
            -> 움직임이 발생하면 value에 작성된 초기값이 감지된 값으로 변경이 됨
            */}
            <button onClick={사용자추가하기}>추가버튼</button>
        </div>
    )
   
}
export default Child;

 

 

App.js에서 실행

 

추가버튼을 누를 때마다 목록이 늘어남