-

LifeCycle (수명주기) 리액트 컴포넌트에는 라이프 사이클(생명 주기)이 존재 컴포넌트의 수명 : 페이지에 렌더링 되기 전 준비 과정에서 시작하여 페이지에서 사라질 때 끝남 클래스형 컴포넌트에서만 사용 가능 함수형 컴포넌트의 경우 Hooks를 사용하여 제어 라이프 사이클 메서드 라이프 사이클 메서드는 9개의 종류를 가지며, 컴포넌트 클래스에서 덮어써 사용 가능 Will- : 작업을 작동하기 전 실행되는 메서드 Did- : 작업을 작동한 후 실행되는 메서드 componentDidCatch v16이후부터 도입된 메서드로, 렌더링 도중 오류 발생 시 오류 UI를 보여주도록 처리 자신에게 발생된 에러는 잡을 수 없으며 this.props.children으로 전달되는 컴포넌트에서 발새한 에러만 추출 가능 c..

React ref DOM을직접 제어해야 할 경우 ref를 활용하여 이름을 부여하여 컴포넌트 내부에서만 활용하도록 하는 기능 state로 제어 불가능한 경우 ref를 활용해야 하는 경우 특정 input에 focus 스크롤 박스 제어 Canvas 요소 사용 다른 컴포넌트 간에 데이터 교류에 ref 사용 x ref 사용방법 1. callback 함수 활용 기본적으로 사용되는 방식 ref 콜백함수를 props로 전달하며, 콜백함수는 ref값을 파라미터로 전달받고, 함수내부에서 파라미터로 받은 ref를 컴포넌트의 멤버 변수로 설정 // this.input이 input 요소의 DOM을 가리킴 {this.input=ref}}/> 2. createRef 활용 리액트 v16.3이상 지원 내장함수 createRef 사용 ..

React Event 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하여 사용방법이 유사함 이벤트 사용시 유의사항 이벤트 이름 : CamelCase 표기법 사용 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아닌, 함수 형태의 값을 전달해줌 // 1. 외부에서 함수 생성 후 호출 const Func=()=> {} // 2. 태그 내에서 함수를 만들어 사용 {console.log(1); }}> DOM요소에만 이벤트를 설정할 수 있고, 직접 만든 컴포넌트 요소에는 이벤트를 자체적으로 설정할 수 없음 // 직접 사용 불가 // 전달받은 props를 컴포넌트 내부의 DOM 이벤트로 설정 가능 Sources 클래스 컴포넌트 활용 input 입력 출력 import { Component } from 'react..

state 컴포넌트 내부에서 바뀔수 있는 값 클래스형 컴포넌트의 경우 state / 함수형 컴포넌트인경우 useState로 사용 클래스 컴포넌트의 state state 초깃값 설정 // [기본문법] // state 초깃값 설정 state = { 속성: 값, 속성: 값 }; // [constructor 메서드 사용한 문법] constructor(props) { super(props); // state 초깃값 설정 this.state = { 속성: 값, 속성: 값 }; } constructor 메서드를 활용한 state constructor 메서드를 작성하여 state 설정 - 객체 형식으로 작성 반드시 super(props) 메서드를 호출하여 클래스 컴포넌트가 상속하고 있는 리액트 컴포넌트 클래스가 지닌 ..

기본 코드 이해 react 기본 사용 리액트를 불러와서 사용할 수 있게 해주 create-react-app 으로 프로젝트 생성 시 node_modules 디렉토리에 react 모듈이 설치 됨 이를 import 구문을 통해 사용 모듈을 불러와서 브라우저에서 사용하기 위해 번들러(웹팩, Parcel, broswerify)를 사용하며 번들러 도구 사용 시 import 로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해줌 import React from 'react';

작업 환경 Setting 절차 Node.js, npm 또는 yarn 설치 git creative-react-app create-react-app 리액트 프로젝트 생성 시 필요한 웹팩, 바벨의 설치 및 설정을 생략하고 바로 프로젝트 작업 환경을 구축해주는 도구 자유로운 설정 변경 가능 프로젝트 생성 1. 프로젝트 생성 // yarn yarn create react-app // npm npm init react-app 2. 서버 구동 해당 디렉토리 이동 후 서버 구동하여 브라우저 창이 열림 cd // yarn yarn start // npm npm start

React Library React 기본 셋팅 react.development.js react-dom.development.js babel.js CDN 링크 // [기본 코드]

props 컴포넌트 간에 속성을 전달하고 동적으로 데이터를 렌더링 React에서 props는 컴포넌트 사용 시 부모 컴포넌트에서 설정하는 값으로 컴포넌트 자신은 props를 읽기 전용으로만 사용 가능 모든 리액트 컴포넌트는 자신의 props를 다룰 때 반드시 순수함수 처럼 동작 해야함 단방향 데이터 흐름 : 상위 컴포넌트 → 하위 컴포넌트로 값을 전달 부모 컴포넌트 : 수정 가능 / 자식 컴포넌트 : 읽기만 가능 props는 설계서를 별도로 가지고 있는게 좋음 Props Type 지정 String 타입 : 따옴표 사용 : " String 이외 타입 : 중괄호 사용 : { } // String Type // exculde String Type alert('1) bool={true}} /> prop 사용방법..

Hook React 16.8 부터 추가된 React 요소 React 또는 React Class형 Component에서 이용하던 코드를 작성할 필요없이 함수형 Component에서 다양한 기능을 사용할 수 있게 만들어준 Library Class 없이 React를 사용할 수 있게 해주는 함수 함수 컴포넌트에서 React State와 생명주기 기능을 연동(hook into)할 수 있게 해주는 함수 함수 컴포넌트를 사용하던 중 state를 추가하고 싶을 때 Hook을 사용 use라는 키워드로 시작 Hook 특징 서로 비슷한 동작을 하는 것을 작은 함수z 묶음으로 컴포넌트를 나눌수 있음 함수형 Component에서만 사용 가능 비동기 방식(async) Class없이 React 기능들을 사용하는 방법 제시 Hook..

Component React로 만들어진 앱을 이루는 최소한의 단위로 화면에 출력되는 요소 자바스크립트 함수와 유사하며, UI를 재사용 가능한 개별적인 단위로 나누어 활용 컴포넌트는 데이터를 다루며 그 결과로 UI를 렌더링 데이터(props)를 입력 받아, View(State) 상태에 따라 DOM 노트를 출력, React 엘리먼트를 반환 기존의 웹프레임워크는 MVC방식으로 분리하여 관리하여 각 요소의 의존성이 높아 재활용이 어렵다는 단점이 있었으나 컴포넌트는 MVC의 View를 독립적으로 구성하여 재사용을 할 수 있고 이를 통해 새로운 컴포넌트를 쉽게 생성가능 컴포넌트는 자체 props를 수정하면 안됨 // [형식] 컴포넌트 생성 // [형식] 컴포넌트 출력 ReactDOM.render(컴포넌트, 컨테이너..