Web/Script

LifeCycle

일단, 컴포넌트가 브라우저에 나타나기 전, 후에 호출되는 API 들이 있습니다. 1. constructorconstructor(props) { super(props); }2. componentDidMountcomponentDidMount() { // 외부 라이브러리 연동: D3, masonry, etc // 컴포넌트에서 필요한 데이터 요청: Ajax, GraphQL, etc // DOM 에 관련된 작업: 스크롤 설정, 크기 읽어오기 등 } 이 API 는 여러분의 컴포넌트가 화면에 나타나게 됐을 때 호출됩니다. 여기선 주로 D3, masonry 처럼 DOM 을 사용해야하는 외부 라이브러리 연동을 하거나, 해당 컴포넌트에서 필요로하는 데이터를 요청하기 위해 axios, fetch 등을 통하여 ajax 요청을..

React 컴포넌트의 결합 props 와 state

props : 부모 컴포넌트를 자식컴포넌트포함시키는것 값 변경을 할 수 없다.state : 동적 값 변경 App.js-메인 컴포넌트import React, { Component } from 'react';import MyName from './MyName';import Counter from './Counter';class App extends Component { render() { return ( //컴포넌트 가져와서 사용 ); }} export default App;MyName.js-propsimport React, {Component} from 'react';//props는 부모컴포넌트가 자식컴포넌트한테 주는값//자식컴포넌트에서 수정 불가 //state는 컴포넌트 내부에서 선언하며 //내부에서 가..

리액트가 만들어진이유

동적인 웹페이지에서 사용자와의 인터랙트가 많아지자.귀찮은 DOM 관리와 상태값 업데이트 관리를 최소화하고, 오직 기능 개발, 그리고 사용자 인터페이스를 구현하는 것에 집중 할 수 있도록 하기위해서 정말 여러 라이브러리들 혹은 프레임워크들이 만들어졌습니다.우리는 지속해서 데이터가 변화하는 대규모 애플리케이션을 구축하기 위해 React를 만들었습니다 하면서 나옴 예를 들어서 다음과 같은 HTML 코드가 있다고 가정해봅시다. Counter 0 + 우리가, 버튼을 눌러서 저 숫자 0 값을 바꿔주려면 각 DOM 엘리먼트에 대한 레퍼런스를 찾고, 해당 DOM 에 접근하여 원하는 작업을 해줘야하죠.var number = 0; var elNumber = document.getElementById('number'); v..

React App.js 기본코드 이해하기-JSX

//src/App.jsimport React, {Component} from 'react';//리액트를 사용하겠다.import './App.css'class App extends Component{ render(){ const name='react'; //값을 선언 후 바꿔야 할 땐 let, 그리고 바꾸지 않을 땐 const 를 사용하시면 됩니다. //var은 함수단위 //let + const는 블록단위(if,for문같이) //let은 동적, const는 정적인 변수이다. const style = { backgroundColor: 'black', padding: '16px', color: 'white', fontSize: '12px' }; //리액트에서는 객체단위로 값을 전달한다. return ( hel..