React
-
RecoilReact 2023. 3. 30. 14:35
Redux 대신 Recoil선택하는 이유 1. Redux의 복잡한 코드 Redux는 복잡한 코드로 사용하고자 할 때 가장 큰 어려움으로 다가온다. action, dispatcher, reducer, store등 구현해야 할 기본 코드가 큰 편이다. 2. Recoil의 간단한 개념 Recoil에서 state를 관리하는 것은 Redux에 비해 간단해 보인다. 3. 쉽게 사용하는 비동기 로직 Redux에서는 비동기를 사용하기 위해 미들웨어를 활용한다. 비동기 통신을 하면 결과가 success일 수도 fail일 수도 있다. 이를 구분해 state 관리를 해야한다. 이를 위해 Redux-thunk, Redux-saga같은 미들웨어를 활용한다. Recoil에서는 내장된 개념인 selector을 활용해 추가적인 미들..
-
React의 생명주기. 라이프 사이클React 2023. 3. 28. 23:16
React는 컴포넌트 기반의 View를 중심으로 한 라이브러리다. 각각의 컴포넌트에는 라이프 사이클, 생명 주기가 존재한다. 컴포넌트의 생명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작해 페이지에서 사라질 때 끝난다. 마운트 (생성) 컴포넌트의 인스턴스가 생성되어, DOM에 삽입될 때 순서대로 호출된다. constructor() 메서드를 바인딩하거나 state를 초기화하는 작업이 없다면 constructor가 없어도 된다. react 컴포넌트의 생성자는 해당 컴포넌트가 마운트되기 전에 호출된다. 생성자 구현하면, this.props가 생성자 내에서 정의되도록 super(props)를 호출해야 한다. state값을 변경하려면 constructor()외부에서 this.setState()를 통해 수정..
-
React HooksReact 2023. 3. 28. 22:43
기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 가능하게 해준다. useState 함수형 컴포넌트에서 상태를 관리해주는 hook이다. 상태의 기본값을 파라미터로 넣어 호출한다. 이 함수를 호출하면 배열이 반환된다. 첫번째 원소는 현재 상태 두번째 원소는 setter함수이다. 업데이트하고 싶은 새로운 값을 파라미터로 넣어주면 된다. useEffect 렌더링 직후 작업을 설정하는 hook이다. 컴포넌트가 처음 나타났을 때 (마운트) 외부 API요청 (REST API등) setInterval을 통한 반복 작업 혹은 setTimeout을 통한 작업 예약 라이브러리 사용 컴포넌트가 사라질 때 (언마운트) setInterval, setTimeout을 사용해 등록한 작업들 clear하기 라이브러리 인스턴스 제..
-
React란React 2023. 3. 28. 22:11
왜? React를 사용할까? A JavaScript library for building user interfaces 리액트는 유저 인터페이스 UI를 만들기 위한 JavaScript 라이브러리다. 컴포넌트 구조의 개발 React로 만들어진 어플리케이션은 기본적으로 element라는 화면에 보여질 것을 표현하는 요소로 구성되어 있다. 객체 지향 프로그래밍 언어에는 생성자가 있다. 즉, 객체를 생성하고 초기화하는 역할을 맡은 요소이다. React에는 React element를 생성하는 component가 있다. component는 props라는 입력을 받고, React element를 만들어낸다. 즉, 함수형 컴포넌트, 클래스형 컴포넌트로도 component를 정의할 수 있다. component는 복잡한 U..