함수 컴포넌트 (3) 썸네일형 리스트형 [React]리엑트 살펴보기7: context API에 대해 contextAPI는 전역에 사용될 데이터를 공유하는데 사용된다. 이는 리엑트의 단방향 데이터 흐름 구조에서 부모 state의 데이터를 props로 자식에게 전달해줄 때 발생하는 문제를 해결하는 데 도움이 된다. 1. props drilling 컴포넌트의 계층이 깊어지고 구조가 복잡해질수록, 부모의 데이터를 props로 자식에게 전달해주기 위해 중간다리 역할만 하는 컴포넌트가 생겨난다. 그리고 전달해줄 props는 점점 더 많아진다. 이런 문제를 props drilling이라 부른다. 이는 컴포넌트의 독립성을 해치고 가독성을 떨어뜨린다. contextAPI는 그런 문제에 대한 대안중 하나로서 전역에 상태를 제공할 때 유용하게 사용된다. 2. 방법 import React, { useReducer } fro.. [React]리엑트 살펴보기6: useReducer 사용 방법 useReducer는 useState처럼 함수 컴포넌트에서 상태관리를 위해 사용하는 훅이다. 하지만, 다양한 숫자의 state를 관리할 때 이점이 있다. 이 Hook 함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시키고 별도의 파일에서 관리하기가 좋다. 1. 문법 function reducer(state: any, action: any) { switch (action.type) { case "INCREAMENT": return state + action.payload; case "DECREAMENT": return state - action.payload; default: return state; } } function App() { // const [number, setNumber] .. [React] 리엑트 살펴보기3: 컴포넌트와 hooks의 등장배경(클래스 컴포넌트, 함수 컴포넌트) 1. 컴포넌트란 컴포넌트란, 독립적으로 사용가능한 UI단위를 의미한다. 이는 실제 html 요소인 button이나 input이 될수도 있고, 작은 컴포넌트들을 조립한 form 처럼 복합적인 컴포넌트일수도 있다. 리엑트에서 컴포넌트는 data를 다루는 로직 부분과 ui 부분으로 구성된다. 2. 클래스 컴포넌트 vs 함수 컴포넌트 컴포넌트는 클래스 컴포넌트와 함수 컴포넌트로 구분된다. 클래스 컴포넌트 class 문법으로 React.Component를 상속하여 만드는 컴포넌트 생성자 함수에서 this로 state를 초기화한다. 컴포넌트 라이프 사이클별 메소드를 사용할 수 있다.(컴포넌트가 mount, update, unmount 되는 시점에 사이드 이펙트를 할 수 있음) render 메소드를 통해서 JSX를 .. 이전 1 다음