useState
useState 는 setState와 비슷함.
const [변수, 함수] = useState(초기값) 이런 형식으로 쓴다.
예시를 보자. 두 개의 버튼이 있는데, 각 버튼을 누를때마다 해당하는 글자가 뜨도록 할거다.
const App = () => {
const [resource, setResource] = useState("posts");
console.log(resource);
return (
<div>
<div>
<button onClick={() => setResource("posts")}>Posts</button>
<button onClick={() => setResource("todos")}>Todos</button>
</div>
<ResourceList resource={resource} />
</div>
);
};resource라는 변수를 정의해주었고, 초기값은 posts로 설정쓰! setResource는 class형 컴포넌트에서의 setState와 같은 역할을 한다고 보면 된다. class형은 constructor부터 시작해서 초기 state랑 setState함수랑.. 쓸게 굉장히 많았는데 함수형 컴포넌트에서 useState를 이용해 state관리를 하니까 훨씬 코드가 간결해졌다.
useEffect를 써보자.
useEffect는 컴디마와 컴디업을 섞어놓은 것
먼저 클래스형의 예시를 보자!
위에서 만든 todos와 post 버튼을 눌렀을 때 api를 받아오게끔 코드를 짰는데, 컴디마만 썼을때는 하나의 값만 받는다! 그래서 컴디업도 써줘야 하는데.. 그냥 컴디업만 쓰면 무한랜더링이 돌게 되어서 현재 state의 resource와 다를 때만 적용이 되도록 조건을 하나 넣어주었고 이렇게 코드가 길어야 해결 가능쓰…
async componentDidMount() {
const response = await axios.get(
`https://jsonplaceholder.typicode.com/${this.props.resource}`
);
this.setState({ resources : response.data });
}
async componentDidUpdate(prevProps) {
if (prevProps.resource !== this.props.resource) {
const response = await axios.get(
`https://jsonplaceholder.typicode.com/${this.props.resource}`
);
this.setState({ resources : response.data });
}
}근데 훅스를 쓰면 조금 더 간결해진다.
const ResourceList = ({ resource }) => {
const [resources, setResources] = useState([]);
const fetchResource = async resource => {
const response = await axios.get(
`https://jsonplaceholder.typicode.com/${resource}`
);
setResources(response.data);
};
useEffect(() => {
fetchResource(resource);
}, [resource]);
return <div>{resources.length}</div>;
};여기서 중요한건 useEffect의 두번째 인자에 꼭 값이 들어가야 한다는 것..! 두 번째 인자가 없으면 무한으로 api 호출을 한다.
마치 이렇게..!