아래 이미지와 같이 데이터를 입력했을때
다음과 같이 데이터가 출력되고, 반복하여 다른데이터를 입력했을때
해당 데이터 역시 출력되어있는 동적으로 출력한다.
이런식으로 사용할때는 세가지를 기억하자
- input 요소가 들어있는 컴포넌트에서 상향식으로 데이터를 전달한다.
- input 에서 입력된 데이터를 부모 컴포넌트에서 받고 다시 필요한 컴포넌트에게 하향식으로 전달한다.
- 데이터 출력을 담당하는 컴포넌트가 데이터를 받고 map 메서드를 사용하여 출력한다.
사용될 파일은 총 3가지다.
UserInput.js , App.js , UserResult.js
UserInput.js : 사용자가 입력한 데이터를 수신하는 역할을 하는 파일
App.js : UserInput으로부터 데이터를 받고(상향식),
다시 다른 컴포넌트 에게 전달(하향식)하는 중간다리 역할의 파일
UserResult.js : 최종적으로 데이터를 출력 역할을 하는 파일
다음은 예시를 보여준다.
- input 요소가 들어있는 컴포넌트에서 상향식으로 데이터 전달.
UserInput.js
const UserInput = (props) => {
const [userName, setUserName] = useState("");
const [userAge, setUserAge] = useState("");
const inputUserNameHandler = (event) => {
setUserName(event.target.value);
};
const inputUserAgeHandler = (event) => {
setUserAge(event.target.value);
};
const submitHandler = (event) => {
event.preventDefault();
const inputData = {
id: Math.random(),
name: userName,
age: userAge,
};
props.onAddCalculator(inputData.id, inputData.name, inputData.age);
setUserName("");
setUserAge("");
};
return (
<div>
<form onSubmit={submitHandler}>
<label htmlFor="username" className={classes.label}>
UserName
</label>
<input
id="username"
className={classes.input}
value={userName}
onChange={inputUserNameHandler}
></input>
<label htmlFor="age" className={classes.label}>
Age(Years)
</label>
<input
id="age"
className={classes.input}
value={userAge}
onChange={inputUserAgeHandler}
></input>
<Button type="submit" className={classes.button}>
Add User
</Button>
</form>
</div> - 데이터를 상향식으로 전달하기 위해서는 함수를 사용해야하는데, 그 함수는 부모에서 정의해놓고 사용하는것은 자식 컴포넌트에서 사용하면된다.
인수값으로 넘겨주고자 하는 데이터들을 서술하면된다.
props.onAddCalculator(inputData.id, inputData.name, inputData.age);- input 에서 입력된 데이터를 부모 컴포넌트에서 받고 다시 필요한 컴포넌트에게 하향식으로 전달한다.
App.js
function App() {
const [ userData , setUserData] = useState([]);
const AddHandler = (userId, userName, userAge) => {
setUserData( (prevData) => {
return [...prevData, {id : userId, name:userName, age:userAge }];
});
};
return (
<div>
<UserInput onAddCalculator={AddHandler}/>
<UserResult users={userData}/>
</div>
);
}의미가 불분명한 코드를 해석해보자.
- 상향식으로 데이터를 받기위해서는 부모컴포넌트에서 함수를 정의해야한다.
해당 함수를 사용하는것은 자식 컴포넌트에게 전달한뒤 자식에서 사용한다.
const AddHandler = (userId, userName, userAge) => {
setUserData( (prevData) => {
return [...prevData, {id : userId, name:userName, age:userAge }];
});
};
// props를 통해 메서드를 자식에게 전달하기
<UserInput onAddCalculator={AddHandler}/>
- 함수적 갱신으로 이전데이터와 입력된데이터를 합쳐야한다.
또한 기존에 들어있는 객체 데이터를 스프레드 문법을 통해 그대로 복사.
const AddHandler = (userId, userName, userAge) => {
setUserData( (prevData) => {
return [...prevData, {id : userId, name:userName, age:userAge }];
});
};
함수적 갱신이란? useState가 반환한 갱신 함수에는 새로운 값을 전달하는 대신 함수를 전달할 수 있다. 이 함수는 이전의 값들을 매개변수로 받으며 리턴값으로 새로운 값을 반환한다.
이전 값을 기억하여 새로운 값을 만들어내고 싶을때 사용하자.
위 코드는 이전 값들을 기억하는 prevData라는 매개변수명을 사용하여 스프레드 문법을 사용하여 새로운 데이터와 합치는 의미의 코드이다.
다음 구문을 예시를 들어서 자세히 해석하면 다음과 같다.
배열안에 객체를 지속적으로 추가해준다는 느낌이다.
return [...prevData, {id : userId, name:userName, age:userAge }];
...prevData => 이전에 배열안에 들어있는 모든 객체들을 가져온다.
ex) { 기존 객체1 } , { 기존 객체2 } , { 기존 객체3 }
{id : userId, name:userName, age:userAge } => 새로운 객체 추가
ex) { 새로운 객체 }
[ { 기존 객체1 } , { 기존 객체2 } , { 기존 객체3 }, + { 새로운 객체} ] - 데이터 출력을 담당하는 컴포넌트가 데이터를 받고 map 메서드를 사용하여 출력한다.
UserResult.js
const UserResult = (props) => {
return (
<div>
{props.users.map((user) => (
<li key={user.id} className={classes.result}>
{user.name} ({user.age}) years old{" "}
</li>
))}
</div>
);
};- map 메서드를 통하여 모든 요소를 순회하며 콜백함수의 내용을 통해 새로운 배열을 지속적으로 반환한다.
<li> </li> 를 값으로 가지는 배열을 반환한다?. 는 의미로 받아들이고있다.
Developer