리액트6 [React]리액트 기초부터(6) LiftCycle API - - - Mounting 컴포넌트가 브라우저 상에 나타난다는 것을 의미한다. constructor(생성자) - 생성자함수 만든 컴포넌트가 처음 브라우저 상에 나타날 때 만들어 지는 과정에서 가장 먼저 실행되는 함수 - 컴포넌트가 가지고 있을 State 초기 설정과 같은 컴포넌트가 만들어지는 과정에서 미리 해야할 작업이 있다면 이곳에서 처리한다. getDerivedStateFromProps - Props로 받은 값을 State로 그대로 동결시키고 싶을 때 사용한다. (Mounting, Updating 과정에서 사용) render - 어떠한 dom을 만들게 될지 정의한다. - 내부에 있는 태그들은 어떤 값을 전달해주게 될지 정의한다. componentDidMount - 실제로 브라.. 2022. 6. 20. [React] 리액트 기초부터(5) state는 컴포넌트 자신이 들고 있다. 변화가 필요하다면 컴포넌트의 내장 함수 중 하나인 setState()를 통해 값을 설정할 수 있다. state를 이용하여 컴포넌트 값 변하는 예제) Counter.js) import React, {Component} from 'react'; class Counter extends Component{ state = { number: 0 } handleIncrease = () =>{ this.setState({ number:this.state.number+1 }) } handleDecrease = () =>{ this.setState({ number:this.state.number-1 }) } render(){ return( 카운터 값 : {this.state.num.. 2022. 6. 14. [React] 리액트 기초부터(4) Props 부모 컴포넌트가 자식 컴포넌트에게 값을 전달할 때 사용한다. => value가 하나의 props가 된다. 사용예제 부모) import React, {Component} from 'react'; class MyName extends Component{ render(){ return( 안녕하세요! 제 이름은 {this.props.name}입니다. ); } } export default MyName; 자식) import React, { Component } from 'react'; import MyName from './MyName'; class App extends Component { render() { return ( ); } } export default App; Default Props 값.. 2022. 6. 10. [React] 리액트 기초부터(3) react 스타일 적용하는 방법 1. 객체 형태로 넣어준다. 2. 카멜케이스로 적용한다. import React, { Component } from 'react'; class App extends Component { render() { const style = { backgroundColor:'black', padding: '16px', color: 'white', fontSize:'36px' } return ( 안녕하세유 ); } } export default App; JSX 클래스를 사용하여 스타일 적용하는 방법 import React, { Component } from 'react'; import './App.css'; class App extends Component { render() { re.. 2022. 6. 9. [React] 리액트 기초부터(2) JSX html 같지만 Javascript로 변환된다. HTML과 비슷하지만 지켜야할 규칙이 몇가지가 있다. 1. 꼭 닫혀있어야 하는 태그 2. 두개 이상의 element는 하나의 element로 감싸져 있어야한다. -> Fragment라는 기능 생김 (불필요한 extra div 없음) JSX 안에 javascript 값 사용하기 import React, {Component} from 'react'; class App extends Component{ render(){ const name = 'react'; return( helle{name}! ); } } export default App; const 와 let function foo(){ var a = 'hello'; if (true){ var a =.. 2022. 6. 9. [React] 리액트 기초부터(1) 기능 개발 사용자 인터페이스 개발에 집중 할 수 있도록 프레임워크, 라이브러리가 만들어져 있다. 이는 생산성, 높은 유지보수성과 연관되어있다. 그중 3대장은 angular, react, vue 등이 있다. angular 다양한 기능이 이미 내장되어있다. http클라이언트, 라우터, 다국어 지원 등등 react 컴포넌트라는 개념에 집중되어있는 라이브러리이다. -> 프레임워크 아님, angular와 달리 사용자에게 전달되는 view만 신경쓴다. 나머지는 서드파티 라이브러리들을 활용한다. vue 입문자가 사용하기에 손쉽다. 공식 라우터와 공식 상태관리 라이브러리가 존재한다. Virtual DOM 변화가 일어난다면 JavaScript로 이루어진 가상의 돔에 한 번 렌더링을 하고 기존 돔과 비교를 한 후 정말 필.. 2022. 6. 8. 이전 1 다음