react18 [React] 컴포넌트의 Lifecycle 생명주기 함수 - 이론 생명주기란 단어가 딱딱할 수 있지만, 쉽게 인간으로 말씀드리면 태어나서 죽을 때까지의 기간입니다. 즉 컴포넌트가 생성되고 소멸될 때까지의 과정으로써, 크게 생성 -> 갱신 -> 소멸 3단계를 거칩니다. 그 과정에서 개발자는 총 8가지의 생명주기 함수를 이용할 수 있으며, 호출하는 타이밍은 리액트가 정합니다. ○ 생성 과정의 함수 1. constructor( props ) 너무나 자주 봐왔던 생성자 함수입니다. props인자와 가장 위에 super(props)는 필수입니다. 주로 초기화하는 데 사용하며, 특히 스테이트(state)는 여기서 초기화해야 합니다. 2. static getDerivedStateFromProps( props , state ) 이름이 긴 정적(static) 함수입니다. 동적이 아닌 .. 2020. 9. 24. [React] 컴포넌트의 데이터 관리 ③ - 콜백 함수 2020/08/18 - [Web프런트엔드/리액트] - [React] 리액트 개발환경 구축 2020/09/09 - [Web프런트엔드/리액트] - [React] 리액트 테스트 앱 생성 및 수정 2020/09/11 - [Web프런트엔드/리액트] - [React] 리액트에서 사용하는 JSX 2020/09/11 - [Web프론트엔드/리액트] - [React] 리액트의 컴포넌트를 알아보자 2020/09/15 - [Web프론트엔드/리액트] - [React] 컴포넌트의 데이터 관리 ① - props 프로퍼티 2020/09/19 - [Web프론트엔드/리액트] - [React] 컴포넌트의 데이터 관리 ② - state 스테이트 지난 시간에 state 기능으로 내부 데이터를 관리해봤습니다. 하지만 부모(App) 컴포넌트는 .. 2020. 9. 21. [React] 컴포넌트의 데이터 관리 ② - state 스테이트 2020/08/18 - [Web프런트엔드/리액트] - [React] 리액트 개발환경 구축 2020/09/09 - [Web프론트엔드/리액트] - [React] 리액트 테스트 앱 생성 및 수정 2020/09/11 - [Web프론트엔드/리액트] - [React] 리액트에서 사용하는 JSX 2020/09/11 - [Web프론트엔드/리액트] - [React] 리액트의 컴포넌트를 알아보자 2020/09/15 - [Web프론트엔드/리액트] - [React] 컴포넌트의 데이터 관리 ① - props 프로퍼티 지난 포스팅에는 프로퍼티를 이용해 서로 다른 컴포넌트간의 데이터 관리를 배웠습니다. 하지만 프로퍼티는 변경이 불가능한 읽기전용이며, 부모에서 자식으로만 전달이 가능했습니다. 이번에는 컴포넌트의 내부 데이터(상태)를.. 2020. 9. 19. [React] 컴포넌트의 데이터 관리 ① - props 프로퍼티 2020.08.18 - [웹 프론트엔드/React 리액트] - [React] 리액트 개발환경 구축 2020.09.09 - [웹 프론트엔드/React 리액트] - [React] 리액트 테스트 앱 생성 및 수정 2020.09.11 - [웹 프론트엔드/React 리액트] - [React] 리액트에서 사용하는 JSX 2020.09.11 - [웹 프론트엔드/React 리액트] - [React] 리액트의 컴포넌트를 알아보자 1. 프로퍼티로 데이터 전달해보기 전 포스팅에서 기본적인 리액트 컴포넌트 사용법을 알아봤습니다. 하지만 어떻게 서로 다른 컴포넌트 간의 데이터를 관리할까요? 이번에는 프로퍼티를 사용하여 데이터를 주고받아 보겠습니다. // ..\test_project\src\components\ChildCompo.. 2020. 9. 15. [React] 리액트의 컴포넌트를 알아보자 2020.08.18 - [웹 프론트엔드/React 리액트] - [React] 리액트 개발환경 구축 2020.09.09 - [웹 프론트엔드/React 리액트] - [React] 리액트 테스트 앱 생성 및 수정 2020.09.11 - [웹 프론트엔드/React 리액트] - [React] 리액트에서 사용하는 JSX 1. 컴포넌트란 무엇인가? 리액트의 알파이자 오메가인 컴포넌트는 한마디로 "레고 블록"이라고 생각하시면 됩니다. 내가 필요한 여러 블록을 만들어 놓고, 그것을 조립 조합하여 완성된 제품을 만듭니다. 2. 간단한 컴포넌트 구현 전에 포스팅했던 [리액트에서 사용하는 JSX]를 기반으로 작성해보겠습니다. 먼저 본인의 프로젝트 루트폴더(여기서는test_project)의 src폴더 안에 components폴.. 2020. 9. 11. [React] 리액트에서 사용하는 JSX 2020.08.18 - [웹 프론트엔드/React 리액트] - [React] 리액트 개발환경 구축 2020.09.09 - [웹 프론트엔드/React 리액트] - [React] 리액트 테스트 앱 생성 및 수정 간단한 JSX 사용해보기 JSX (JavaScript XML)는 자바스크립트에 XML을 추가 확장한 문법입니다. HTML에서 XML로 다시 JS + XML이 바로 JSX입니다. 참 간단하죠? 상기한 테스트앱 생성 글을 기반으로 JSX 사용해보겠습니다. 먼저 App.js 파일을 열고 하기와 같이 수정합니다. // ..\test_project\src\App.js import React, { Component } from "react"; class App extends Component { render().. 2020. 9. 11. [React] 리액트 테스트 앱 생성 및 수정 리액트 개발환경 구축이 안 된 분들은 아래 링크 참조 2020.08.18 - [웹 프론트엔드/React 리액트] - [React] 리액트 개발환경 구축 1. 테스트 프로젝트 생성 및 구동 예시는 윈도우 환경과 상기한 개발환경이 구축됐다는 전제로 쓰겠습니다. 먼저 명령 프롬프트(cmd)를 열고 하기와 같이 입력합니다.(프로젝트명은 test_project) yarn create react-app test_project 이런 식으로 기본 프로젝트 골격이 자동으로 완성됩니다. 그다음은 프로젝트 루트 폴더(test_project) 이동해서 yarn start 기본 포트는 3000번이지만 사용중일 경우 다른 포트 번호도 기동 가능합니다. 본인이 사용하는 기본 브라우저에 로컬호스트 주소로 위 화면처럼 나오면 성공! .. 2020. 9. 9. [React] Visual Studio Code 및 관련 플러그인 설치 비주얼 스튜디오 코드 설치 https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications. code.visualstudio.com 1. Reactjs code snippets 플러그인 설치 기본적인.. 2020. 8. 21. [React] 리액트 개발환경 구축 1. 노드 버전 매니저 (NVM) 설치 리액트는 javascript 기반이라 노드제이에스(Node.js) 런타임으로 돌리겠습니다. 그래서 편하게 NVM 깔고 버전 관리하면서 구축하는 방향으로 고고~! https://github.com/coreybutler/nvm-windows/releases Releases · coreybutler/nvm-windows A node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windows github.com 여기 들어가서 Assets에 있는 nvm-setup.zip 설치 2. NVM 설치 확인하기 명령 프롬프트 (윈도우면cmd) 열어서 > nvm -v Runn.. 2020. 8. 18. 이전 1 2 다음
