Develop Log/React 썸네일형 리스트형 React 기본 제공 컴포넌트 Suspense, Fragment 내장 컴포넌트 React는 특별한 역할을 수행하도록 설계된 내장 컴포넌트가 있다. 기본으로 제공되는 컴포넌트의 역할은 다양한 문제나 요구 사항을 해결하게 도와주며, 개발을 돕기 위한 도구나 특정 문제에 대한 해결책, 성능 최적화를 위한 도구 등이 포함된다. 불필요한 div태그의 사용을 줄여주는 , 비동기 요청을 통해 로딩중일 때의 화면을 보여줄 때 사용하는 등 개발시 자주 사용되는 몇 가지 기본 내장 컴포넌트를 알아보려고 한다. 주요 내장 컴포넌트 Fragment 는 React의 내장 컴포넌트 중 하나로, 주로 여러 컴포넌트나 요소를 그룹화하는 데 사용된다. 의 가장 큰 특징은 불필요한 DOM 노드를 생성하지 않는다는 것이다. 주요 특징 DOM 노드를 추가하지 않는다: Fragment는 렌더링 결과에 직.. 더보기 React의 클래스 컴포넌트와 함수형 컴포넌트가 뭘까? React : 클래스 컴포넌트, 함수형 컴포넌트 클래스 컴포넌트 클래스 컴포넌트는 React의 전통적인 컴포넌트 작성 방법이다. 클래스 컴포넌트는 ES6의 클래스를 활용하며, 컴포넌트의 상태(state)를 가질 수 있다. 또한, 라이프사이클 메소드를 활용할 수 있어 상태 업데이트 또는 컴포넌트 라이프사이클에 따른 특정 동작을 구현할 수 있게 되며, componentDidMount, componentDidUpdate, componentWillUnmount 등의 메소드를 제공한다. 라이프 사이클 Mounting : 컴포넌트 인스턴스가 생성되어 DOM에 삽입되는 단계 constructor(): 컴포넌트가 생성될 때 호출되는 메소드로, 초기 state를 정의하거나 메소드를 바인딩하는 등의 작업을 수행한다. st.. 더보기 React - 고차컴포넌트(HOC) 알아보기 고차 컴포넌트(HOC, Higher Order Component) 고차 컴포넌트(HOC, Higher Order Component)란? 고차 컴포넌트는 React에서 사용되는 기술로써 React API 일부가 아닌 React의 구성적 특성에서 나오는 패턴이다. 고차 컴포넌트는 컴포넌트의 재사용, 로직 추상화, 상태 관리 등에 유용하게 사용되는 패턴인데, 이는 자바스크립트의 고차 함수(Higher-Order Function) 개념에서 비롯된 것으로 다른 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 함수이다. 고차 컴포넌트의 목적 코드 재사용: 리액트 컴포넌트는 독립적인 단위로 기능을 캡슐화한다. 이로 인해 컴포넌트 간에 상태나 메소드를 공유하는 것이 어려울 수 있는데, 고차 컴포넌트는 이 문제를 해결.. 더보기 React - useState()를 알아보자 React - useState() useState()는 React를 처음 접하게 되면 가장 먼저 접하게 되는 hook 중 하나라고 생각한다 가장 간단한 설명으로는 상태를 저장하여 관리할 수 있는 hook이라고 알고 있지만 useState가 어떤 식으로 동작하는지, 어떻게 상태를 관리하는지는 자세하게 알아보려고 하지 않았던 것 같다 그래서 이번기회에 useState()가 정확하게 어떤건지, 어떤 역할을 하고 어떻게 구성이 되어있으며 react 컴포넌트에서 어떻게 동작하는지 알아보려고 한다 useState() useState는 React 컴포넌트에서 상태 관리를 위해 사용되는 Hook이다 이 hook을 사용하게 되면 함수형 컴포넌트 내에서도 상태를 가질 수 있게 되어 더욱 선언적이고 가독성 있는 코드 작성이.. 더보기 React-Memoization React rendering React는 컴포넌트를 렌더링 한 뒤 이전 렌더된 결과와 비교하여 DOM을 업데이트 함 함수형 컴포넌트 기준 React.useState()의 setter, React.useReducer()의 dipatches가 실행되면 해당 컴포넌트가 업데이트 된다 React의 컴포넌트가 업데이트 되면 업데이트 되는 컴포넌트 내부에 있는 모든 자식 컴포넌트를 순차적으로 리렌더링 한다. Parent > Child > GrandChild 의 순으로 컴포넌트가 구성 되어 있을 경우 Child 컴포넌트가 업데이트 된다면 상위 컴포넌트인 Parent 컴포넌트는 리렌더링 하지 않지만 하위 컴포넌트인 GrandChild컴포넌트는 다시 렌더링 된다 만약 GrandChild 컴포넌트 내부에 자식 컴포넌트가 .. 더보기 이전 1 다음
