이제껏 component를 제작할 때, 함수형 component만을 사용했었다. React에서는 함수형이 아닌 다른 방법으로 component를 빌드할 수 있다. React hook에서도 잠깐 다뤘지만, Class를 이용해서 component를 제작할 수 있다. 물론, hook이 도입된 이후로 React project에서는 거의 이 방법을 사용하지 않는다. 따라서, 이부분은 생략을 해도 무관하지만 아직 여전히 많은 third party library나 이미 제작된 project에서 볼 가능성이 있다. Functional Components그 전에 이제까지 배웠던 함수형 component에 대해서 정리하고 넘어가자.function Product(props) { return A Product! ;}// o..
이전 시간에 이어서 side effect를 해결하기 위한 방법에 대해서 이야기 해보자. Side Effect란? React의 목적 React는 사용자의 입력에 반응하여 필요할 때마다 UI를 렌더링한다는 주요 임무를 갖고 있다. state나 event들의 특징을 보자면 화면에 무언가를 가져오는 것들이었다. 그리고 사용자가 coding-leaf.tistory.com useEffect()란? React에는 side effect를 처리하는 더 좋은 도구가 있다. useEffect()라는 hook으로 component함수 내부에서 실행할 수 있는 또다른 함수이다. 이 함수는 특별한 일은 하는데, useEffect() 그리고 2개의 parameter와 같이 호출된다. 첫 번째 parameter는 함수로, 모든 co..
React의 목적 React는 사용자의 입력에 반응하여 필요할 때마다 UI를 렌더링한다는 주요 임무를 갖고 있다. state나 event들의 특징을 보자면 화면에 무언가를 가져오는 것들이었다. 그리고 사용자가 그 무언가와 상호 작용하게 하는 것이 주된 목적이었다. JSX 코드와 DOM을 평가하고 렌더링하고 state와 props를 관리한다. 사용자 입력이 올바르게 반영되는지 확인하기 위해서 모든 component에 필요한 데이터가 있는지 체크한다. Side Effect란? side effect 혹은 effect라고 불리는 이것은 무엇일까? side effect는 애플리케이션에서 "범위 밖"을 함께 실행할 때 나타나는 모든 것을 말하며, component가 렌더링된 이후에 비동기로 처리되어야 하는 부수적인..
