개발에 도움이 되는/React (6) 썸네일형 리스트형 생명 주기(Life Cycle) - 생명 주기 (Life Cycle) : React는 Component 기반의 View를 중심으로 한 Library이다. 그러다 보니 각각의 Component에는 생명 주기가 존재한다. Component의 수명은 보통 Page에서 Rendering 되기 전인 준비 과정에서 시작하여 Page에서 사라질 때 끝이 난다. - 생명 주기 (Life Cycle) 유형 : 생성될 때(Mount), 업데이트할 때(Update), 제거할 때(Unmount) 총 3개로 나뉜다. - Mount : DOM이 생성되고 웹 브라우저 상에서 나타나는 것 - Update : 뜻 그대로 DOM이 업데이트 되는 경우인데, 아래와 같은 상황에서 발생. 1) props가 바뀔 때 2) state가 바뀔 때 3) 상위 Component가 .. react-beautiful-dnd - react-beautiful-dnd? atlassian에서 만든 Drag and Drop Library이다. https://github.com/atlassian/react-beautiful-dnd react-dnd 처럼 customizing 할 수는 없지만, 위 그림과 같이 간단하게 drag and drop을 구현하기 위해서는 사용하기 좋다. - 예제 - react-beautiful-dnd install 후 import import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; - drag and drop 을 할 요소 상태 생성 const [fields, setfields] = useState(formList) - 위 그림.. Flux 패턴 - Flux 패턴이란? MVC 패턴의 단점을 보완하기 위해 페이스북에서 만든 단방향 데이터 흐름을 위한 패턴 - 왜 사용할까? MVC 패턴에는 Model과 View가 양방향 패턴에서 나오는 의존성을 가진다는 특성이 있다. 이는 복잡한 Application을 서비스하게 된다면 새로운 기능이 추가 될 때마다 시스템의 복잡도가 높아지고, 예측 불가능한 코드를 만들게 되며, 그렇게 된다면 예측 못할 버그들이 쏟아질 가능성이 높아진다. * 실제로 페이스북이 가졌던 문제점 중 하나가 알림 버그였다. 페이스북에 로그인 했을 때 새로운 메시지 아이콘 알림이 떠 있지만, 실제로는 아무런 메시지가 없었다. 이를 단방향 데이터 흐름인 Flux 패턴으로 해결 하였다고 한다. - 용어 정리 1. Action : 정확히 말하면 .. useEffect - 요약 설정한 useState 값이 바뀌면 등록한 함수가 실행. 페이지가 렌더링되고 무조건 최초 한번은 실행 됨. # 모듈 선언 import React, { useEffect } from "react"; # useEffect 선언 useEffect(() => {}, [value]); value 값이 변경되면 함수가 실행된다. value = 변수, case 1) value를 넣지 않고 []인 상태면, 최초 한번만 실행 case 2) value를 넣으면 value 값이 업데이트 될 때만 실행 case 3) 아예 비워 놓으면 리렌더링 할 때마다 실행 () => {} = 변수가 변경되면 실행할 함수 ex) const [iu, setIu] = useState(0); -> iu를 0으로 초기화 useEffect(.. useState - 정의 value 값이 바뀌면 자동으로 리렌더링 해주는 함수. 컴포넌트에서 상태를 관리할 수 있음. # 모듈 선언 import React, { useState } from "react"; # useState 선언 let [value, setValue] = useState(init); ES6 destructuring 문법으로 useState에서 return 된 배열들이 해당 배열에 맞게 들어감. 첫번째 원소 value는 현재 상태 값 변수, 두번째 원소 setValue는 상태 값을 갱신해주는 Setter 함수이다. value = 변수 setValue = 변수를 변경해주는 함수 init = 해당 값으로 변수 초기화 ex) let [age, setAge] = useState(0); -> age의 초기값을 0.. React - React란? 페이스북에서 만든 유저 인터페이스(UI)를 만들기 위한 JavaScript 기반 라이브러리 - 왜 사용할까? 사용자와의 인터렉션을 UI로 쉽게 구현하고, 대규모의 복잡한 동적인 웹페이지를 관리하기 위해 사용 브라우저 전체를 새로고침하지 않고도 컨텐츠를 빠르게 변경 가능 - 주요 특징 1. 컴포넌트 컴포넌트는 UI를 구성하는 개별 단위이다. 페이지는 컴포넌트의 조합인 느낌 2. 단방향 데이터 흐름 (Flux 패턴) 부모로부터 자식으로만 데이터를 전달할 수 있다. 유지보수가 더 편함 3. 가상 DOM DOM은 Document Object Model의 약자이며, HTML, XML, CSS 등을 트리 구조로 인식하고 데이터를 객체로 간주해 관리한다. HTML 코드를 브라우저에서 열게 되면 DO.. 이전 1 다음
