[React] LifeCycle API

LifeCycle API 란?LifeCycle API 는 React에서 생명주기이다 무슨 말이냐면 Component가1. 나타날 때2. 업데이트 될 때3. 사라질 때 등 중간중간 과정에서 작업을 할 때 사용되기 때문이다. LifeCycle API 의 종류는 매우 많다 (사진 참고)LifeCycle API 종류 소개 (사진 참고)1. Mounting: Component가 우리 브라우저 상에 나타날 때 2. Updating: Component의 Props가 바뀌거나 어떤 내용이 바뀌었을 때, 업데이트 될 때 3. Unmounting: Component가 우리 브라우저 상에서 사라질 때 4. LifeCycle API 소개constructor우리가 만든 함수가 처음 브라우저 상에 나타날 때 가장 먼저 사용되는 ..

• format_list_bulleted React/기본
• · 2021. 12. 26.

[React] State 사용법 ( + Props 와 비교 )

State란?- state는 Component 내부에 있고 Component 안에서 바뀔 수 있는 값- 값이 바뀔 때마다 Component는 리렌더링(개발자가 작성한 문서가 브라우저에서 출력되는 과정)됨- 값을 변경할 때에는 setState라는 함수를 사용함Props 와 State 비교- Props는 부모가 자식한테 넘겨주는 값을  State는 자기 자신이 가지고 있는 값을 의미한다.  - Props는 읽기 전용, State는 수정도 가능 - 이때 State는 자기 자신이 가지고 있는 값을 변경할 수도 있다. (with. setState 함수)State 사용법1. State 을 이용한 카운터 만들기 (1) App.js 와 Counter.js 를 만듦(2) Counter.js 내용import React, ..

• format_list_bulleted React/활용
• · 2021. 12. 26.

[React] Props 사용법

Props 란?부모 컴포넌트가 자식 컴포넌트한테 값을 전달할 때 사용됨Props 사용법1. Props 구조 만들기(1) App.js와 MyName.js 를 만듦 (2) MyName.js 내용import React, { Component } from "react";class MyName extends Component { static defaultProps = { name: "기본이름" }; render() { return ( 안녕하세요! 제 이름은 {this.props.name} 입니다. ); }}export default MyName;(3) App.js 내용import React, { Component } from "react";import My..

• format_list_bulleted React/활용
• · 2021. 12. 26.

[React] JSX 기본 문법 (3/3)

CSS 적용 방법 (1)import React, { Component, Fragment } from "react";class App extends Component { render() { const style = { backgroundColor : 'black', padding : '16px', color : 'white', fontSize : '36px' }; return ( 안녕하세요! ); }}export default App;CSS 적용 방법 (2)import React, { Component, Fragment } from "react";import './App.css';class App extends ..

• format_list_bulleted React/기본
• · 2021. 12. 23.

[React] JSX 기본 문법 (2/3)

출력방법 1. - 단순 출력import React, { Component, Fragment } from 'react';class App extends Component { render() { const name = 'velopert'; return ( hello {name} ); }}hello velopert출력방법 2. - 조건문 (1)import React, { Component, Fragment } from 'react';class App extends Component { render() { return ( { ..

• format_list_bulleted React/기본
• · 2021. 12. 23.

[React] React란, JSX 기본 문법 (1/3)

프론트엔드 라이브러리 종류AngularTypeScript 기반ReactVirtual DOM 지원VueVirtual Dom 지원, TypeScript 지원* React 메뉴얼 : 우리는 지속해서 데이터가 변화하는 대규모 애플리케이션을 구축하기 위해 만듦* Virtual DOM : DOM의 구조만 간결히 흉내낸 자바스크립트 객체 React 시작하는 방법import React, { Component } from 'react';class App extends Component { render() { return ( 안녕하세요 리엑트 ); }}- 'react' : react 모듈을 불러와서 사용함- impor..

• format_list_bulleted React/기본
• · 2021. 12. 23.