React (5) 썸네일형 리스트형 [React]컨텍스트 API createContext() createContext()함수를 사용하면 컨텍스트르르 생성할 수 있습니다. 이 함수는 공급자와 소비자를 반환합니다. 공급자와 소비자에 대한 개념은 밑의 링크를 참고해주세요.(컨텍스트 개념 이해하기) createContext()의 기본적인 사용 방법입니다. const MyContext = React.createContext(defaultValue); //공급자와 소비자는 MyContext.Provider, MyContext.Consumer으로 접근하여 사용한다. //const { Provider, Consumer } = React.createContext(defaultValue); 처럼 분할 할당해도 된다. createContext()는 리액트 최상위 함수입니다. 따라서 Re.. [React] 컨텍스트 개념 이해하기 컴포넌트 간 데이터 흐름 기본적으로 컴포넌트는 서로(자식, 부모) 간에 연결이 되어 있어야 데이터를 주고받을 수 있습니다. 예를 들어 컴포넌트의 프로퍼티(props) 값은 데이터가 위에서 아래로 흐르는 트리 구조의 형태를 띠고 있습니다. 따라서 props나 state는 부모와 자식 컴포넌트가 연결된 상태에서 공유가 가능한 데이터입니다. 그림을 참고해 보면 root가 최상위 컴포넌트입니다. 만약에 data라는 데이터를 root에서부터 A3로 전달한다고 하면 그 과정은 Root -> A -> A1 -> A3가 됩니다. 그런데 이 경우에 중간에 껴있는 컴포넌트인 A1이나 A의 경우 data라는 프로퍼티가 필요 없을 수도 있고, 전달 과정에서 이 때문에 누락 될 수도 있습니다. 이렇게 되면 리액트에서 오류를 발.. [React]컴포넌트 생명주기(Component LifeCycle)파악하기 컴포넌트 생명주기 컴포넌트가 생성되고 소멸하기까지의 과정을 컴포넌트의 생명주기(LifeCycle)이라고 합니다. 예를 들어, 컴포넌트는 생성이 되고나서부터 생성이 완료되고, 어떤 데이터가 갱신되고 소멸되는 과정을 거치게 됩니다. 이러한 과정을 컴포넌트의 생명주기라고 합니다. 그리고 생명주기 함수를 활용하면 생명주기의 특정 시점에 원하는 함수를 실행시켜서 원하는 동작을 하게 할 수 있게 됩니다. 생명주기 함수 생명주기는 도식화하면 다음과 같습니다. 생명주기 함수는 총 8종의 함수가 있습니다. 생명주기 함수는 컴포넌트의 생명주기 간에 리액트에서 자동으로 호출합니다. constructor getDerivedStateFromProps render componentDidMount shouldComponentUpd.. [React/Component형 클래스] PureComponent와 Component의 차이 이번 포스트에서는 PureComponenet와 Componenet의 차이에 대해 알아보려 합니다. 클래스형 컴포넌트 - Component Class 클래스현 컴포넌트에는 두 종류가 있는데 이 두 종류가 바로 Component 클래스와 PureComponent 클래스입니다. 일반적으로 알고있는 Component 클래스의 졍우 props와 state, 생명주기함수가 들어있는 구조의 컴포넌트를 제작할 때 사용합니다. 다음과 같은 구조를 띄고 있습니다. import React from 'react'; class ExampleComponent extends React.Component { constructor(props) { super(props); console.lod('생성자');.. [React/Component]React 컴포넌트란? 리액트의 컴포넌트 개념은 리액트의 꽃이라 불릴 정도로 매우 중요한 요소 입니다. 리액트로 작성된 화면은 컴포넌트만으로 구성이 됩니다. 기존 웹 프레임워크의 구조 기존의 웹 프레임워크는 MVC방식으로 관리 되었습니다. 각각 정보, 화면, 구동 코드를 의미 하며 정보를 모델(Model), 화면을 뷰(View), 구동을 컨트롤러(Conroller)라고 해서 MVC라고 이름이 붙여졌습니다. 장점으로 코드 관리가 효율적이라는 점을 꼽을 수 있지만 MVC 각 요소의 의존성이 높아서 재활용하기 어렵다는 점이 단점으로 꼽혔습니다. 컴포넌트란? 현재 많은 웹사이트의 화면은 각 요소가 비슷하고 반복적으로 사용한 경우가 많습니다. 예를 들어 youtube에 들어가 보면 동영상을 볼 수 있게 컨텐츠를 나열해 놓는데 이 각각을.. 이전 1 다음
