리액트
-
Hooks (useState, useEffect)리액트 2021. 8. 23. 17:37
공부하기 위해 리액트 공식문서와 블로그를 정리하여 작성한 글입니다. Class 컴포넌트의 생명주기 메서드들과 비교를 하기에 이에 대하여 먼저 알고 공부하시면 좋습니다. 여기에 사용한 코드들은 전부 리액트 공식문서에서 갖고 왔습니다 ㅎ. Hook이란 함수 컴포넌트에 state와 생명주기 등의 리액트 특성들에 접근할 수 있도록 도와주는 특별한 함수입니다! 리액트 훅스는 기존 컴포넌트 생명주기에 기반하여 작성하는 클래스 문법에서 발생하는 여러 불편한 점들로부터 벗어나기 위해 고안한 것입니다. 예를 들어, componentDidMount()와 componentDidUpdate() 내에 중복되는 코드를 작성해야했거나, componentWillUnmount() 내에서 서로 다른 기능을 갖는 함수들을 공존하게 해야했..
-
컴포넌트 생명주기리액트 2021. 8. 22. 17:49
저는 리액트를 활용할 때 주로 함수를 통해 작성해서 생명주기에 대한 공부를 자세히 안했는데, 요새 리액트 에러를 볼 때 생명주기 관련한 단어들을 자주 만나서 이번에 한번 리액트 공식문서 및 블로그를 보며 공부할 겸 작성하게 됐습니다. 코드 예시들은 전부 리액트 공식문서 및 리액트 블로그에서 갖고왔습니다. 우리가 컴포넌트를 렌더링할 때 위의 생명주기에 따라 진행하게 되는데 class를 사용할 때 위 함수들을 접근 할 수 있어 어느정도 제어를 할 수 있습니다. 리액트 컴포넌트를 클래스로 사용하기 위해서는 React.Component를 상속받아야 하며 render() 메소드를 무조건 작성해야합니다. 그 이외는 전부 선택사항입니다. 리액트 문서를 보면 Component를 클래스를 작성하는 것을 추천하지는 않습니..