Web Develop/React 썸네일형 리스트형 React Hooks에 대해 알아보자. (2) 지난 글에서는 Hooks가 무엇인가에 대해 알아보고 useState Hooks와 이를 이용한 useInput, useTabs라는 새로운 훅도 만들어보았다. 이번 글에서는 useEffect에 대해 알아보고 사용법과 이를 이용하여 새로운 훅들을 만들어 볼 것이다. useEffect란? useEffect의 역할은 3가지가 있다. componentDidMount componentWillUpdate componentWillMount 즉, 리액트의 생명 주기를 관리할 수 있다는 것이다. 또한 위의 3가지 상황에 모두 동작하는 것이 아니라, 선택해서 특정 상황에만 렌더링되도록 할 수도 있다. 먼저 useEffect를 어떻게 사용하는지 살펴보자. useEffect(함수, [deps]); useEffect는 첫 번째 인.. 더보기 React Hook에 대해 알아보자.(1) 리액트 훅이란 무엇일까? 간단하게 말하면, 함수 컴포넌트에서 state(상태)를 가질 수 있도록 해주는 것이다. 그럼 Hook을 사용하지 않고는 함수 컴포넌트에서 state(상태)를 다룰 수 없을까? Hooks가 나오기 전까지, 함수 컴포넌트에서는 state를 다룰 수 없었다. state(상태)를 다루기 위해서는 클래스 컴포넌트를 사용하여 didmount, didupdate 등 컴포넌트의 생명 주기를 관리해야 했다. 하지만 React Hooks가 나오게 되면서 클래스 컴포넌트에서만 가능했던 것을 함수 컴포넌트에서도 똑같이 가능하도록 된 것이다. 또한 훅을 사용하여 함수형 프로그래밍을 하게 되면서 짧고 가독성도 더 좋은 코드를 작성할 수 있게 되었다. 훅의 역사 recompose 라는 라이브러리에서 시작되.. 더보기 [React] 참고하면 좋은 사이트 1. React https://reactjs.org/ React – A JavaScript library for building user interfaces A JavaScript library for building user interfaces reactjs.org React 공식 홈페이지 2. Code Sandbox https://codesandbox.io/s/new React - CodeSandbox React example starter project codesandbox.io 더보기 이전 1 다음
