리액트숙련주차 강의를 듣다가 useState 부분을 연습문제로 복습하고 정리하고 싶어서 리액트 공식문서를 읽어보았다. 컴포넌트 간 State 공유하기를 보다가 props로 넘겨주는 부분에서 정리가 필요할 것 같아서 간단한 코드 하나 풀이를 해보았다!
React 공식문서 풀이 (props)
풀이할 코드
import { useState } from "react";
import { foods, filterItems } from "./data.js";
export default function FilterableList() {
const [query, setQuery] = useState("");
const results = filterItems(foods, query);
function handleChange(e) {
setQuery(e.target.value);
}
return (
<>
<SearchBar query={query} onChange={handleChange} />
<hr />
<List items={results} />
</>
);
}
function SearchBar({ query, onChange }) {
return (
<label>
Search: <input value={query} onChange={onChange} />
</label>
);
}
function List({ items }) {
return (
<table>
{items.map((food) => (
<tr key={food.id}>
<td>{food.name}</td>
<td>{food.description}</td>
</tr>
))}
</table>
);
}
./data.js에는 객체 형태로 이루어진 foods 정보들이 있고 이 foods들의 요소를 하나씩 돌면서 조건에 맞는거만 보여주는 형식이다.
그리고 input창에 타이핑 할 때마다 그에 맞는 단어가 검색되고 음식에 대한 정보가 나온다
지금 이게 중요한게 아니지~!!!
이제 컴포넌트 별로 나눠서 풀이해보자
FilterableList
import { useState } from "react";
import { foods, filterItems } from "./data.js";
export default function FilterableList() {
const [query, setQuery] = useState("");
const results = filterItems(foods, query);
function handleChange(e) {
setQuery(e.target.value);
}
return (
<>
<SearchBar query={query} onChange={handleChange} />
<hr />
<List items={results} />
</>
);
}SearchBar 컴포넌트에는 query value값을 전달하고 onChange 이벤트에 handleChange 이벤트를 넣어주었다.
SearchBar
function SearchBar({ query, onChange }) {
return (
<label>
Search: <input value={query} onChange={onChange} />
// {onChange} 에는 handleChange 함수가 들어있음!
</label>
);
}SearchBar 컴포넌트는 부모컴포넌트에서 props로 전달받았던 query와 onChange 이벤트를 받고 input태그에 넣어주었다. ("input태그는 value, onChange 필수!!")
⭐️ 여기서 알아야 할 부분!!
Button, div 같은 빌트인 컴포넌트는 onClick과 같은 브라우저 이벤트 이름만 지원한다!
따라서 input 같은 기본 태그는 내가 만든 태그도 아니고 컴포넌트도 아니기 때문에 내가 만든 이벤트함수를 부여할 수 없다는 걸 알아야한다.
내가 쓴 잘못된 코드
function SearchBar({ query, onChange, handleChange }) {
return (
<label>
Search:{' '}
<input
value={query}
onChange={handleChange}
/>
</label>
);
}처음에 SearchBar에 props를 넘겨줄 때 input은 내가 만든 태그가 아니다 > "기본 제공하는 이벤트만 된다."
를 적용해서 onChange 이벤트를 넘겨주고 실행될 함수(handleChange)를 줘서 이벤트로 넣었다.
props 는 값을 넘겨주는게 아니라 key를 넘겨주는거다!! key를 넘겨주고 그 안에 들어있는 값(value)를 뽑아 쓰는 것!
처음 props를 배울 때 객체형태이니까 props.query props.handleEvent 이런식으로 썼는데 props는 생략이 가능하니까 위 코드 같은 형태가 되어버린것!
SearchBar
//FilterableList 컴포넌트에서 넘겨받은 props
<List items={results} />
function List({ items }) {
return (
<table>
{items.map((food) => (
<tr key={food.id}>
<td>{food.name}</td>
<td>{food.description}</td>
</tr>
))}
</table>
);
}List 컴포넌트도 마찬가지로 item의 값!이 아니라 result를 가지고 있는 item key를 넘겨받은거고
이 item을 map 메소드가 새로운 배열로 순회하면서 각각 정보들을 뿌려주는 방식이다.
props 정리를 해도 해도 이해가 안되고 새로운 느낌이었는데 처음으로 좋은 느낌을 받아서 기분이 후련했다. 코드도 확실히 더 잘 이해되고 그동안 왜 그렇게 썼었는지 헷갈렸던 부분도 정리되었다.
리덕스 들어가기 전에 계속 강의 복습하고 공식문서 속 문제들 풀면서 이해해나가야겠다!
출처
