xtring.dev

React Hooks는 Functional Component에서 Class-type Component의 LifeCycle의 동작 방식을 가능하게 해줍니다. Hooks는 React 16.8에서 새롭게 추가되었습니다. 그리고 Class 작성 없이 state와 React의 특성을 사용하게 해주었습니다. Hooks를 사용하기 위해서는 반드시 지켜줘야하는 몇가지 규칙이 존재합니다. 그리고 자동으로 이 규칙을 강요하게 해주는 linter plugin이 존재합니다. Rules of Hooks Only Call Hooks at the Top Level Hooks를 사용할 때는 꼭 맨 위에서 호출하라! Hooks는 loops, conditions, nested functions 안에서 호출하면 안됩니다. 대신 React..

React에서 중요한 개념 중 하나인 컴포넌트에 대해서 알아보겠습니다. React를 사용하여 애플리케이션의 인터페이스를 설계할 때 사용자가 볼 수 있는 요소는 여러가지의 컴포넌트(Component)로 구성되어 있습니다. 예를 들어 페이스북의 게시물 하나에 제목, 글과 사용자 정보, 이미지, 입력창, 버튼 등 모두 하나의 컴포넌트입니다. 그리고 게시물 하나에 들어가는 컴포넌트 수만해도 백가지 이상 들어간다고 합니다! 이러한 예시만 보아도 컴포넌트를 잘 만들게 되면 하나의 유기체(컴포넌트의 집합)를 구성하는데 효율적인 구조를 만들 수 있습니다. 컴포넌트의 기능 컴포넌트의 기능은 단순한 템플릿 이상입니다. 데이터가 주어졌을 때 이에 맞추어 UI를 만들어주는 것 라이프사이클(Lifecycle) API를 이용하여..