React 6

react
React 공부하기 7 - 컴포넌트 라이프 사이클
## React Component Life Cycle 라이프 사이클은 총 10가지다. `Will`접두사는 어떤 작업을 작동하기전에 실행하는 메소드가, `Did`는 어떤 작업을 한 후에 실해오디는 메서드다. 이 메서드들은 컴포넌트 클래스에서 덮어써서 선언하여 사용할 수 있다. 라이프사이클은 총 3가지 카테고리로 나눌 수 있는데, `mount`, `unm...
2019-05-215분
react
React 공부하기 8 - 함수형 컴포넌트
### 함수형 컴포넌트 ```javascript import React from 'react'; function Hello(props) { return ( <div>hello {props.name}</div> ) } ``` 함수형 컴포넌트는 컴포넌트에서 라이프사이클, state 등의 기능을 제거한 상태이므로 메모리 사용량이...
2019-05-211분
react
React 공부하기 6 - 컴포넌트 반복
## 컴포넌트 반복해서 쓰기 ```javascript import React, {Component} from 'react'; class IterationSample extends Component { render () { const names = ['눈사람', '얼음', '눈', '바람'] const nameList ...
2019-05-212분
react
React 공부하기 5 - Reference
## Reference (Ref) 특정 DOM요소에 작업을 하기 위해서 id를 부여하는 것 처럼, React에서 DOM에 이름을 다는 방식이 있는데 이것이 바로 ref (Reference)다. 반드시, `DOM에 직접적으로 접근하여 조작이 필요할 때 만 이용해야 한다.` ### 컴퍼넌트 내부에서 사용 ```javascript import React, ...
2019-05-092분
react
React 공부하기 4 - Event
## 이벤트 리액트의 이벤트는 기본적으로 HTML의 이벤트와 비슷하지만, 주의사항이 몇가지 있습니다. 1. 이벤트 명은 카멜 케이스로 작성해야 한다. `onclick` → `onClick` 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니고, 함수형태의 값을 전달해야 한다. 3. DOM요소에만 설정할 수 있다. Custom Component는...
2019-05-082분
react
React 공부하기 3 - Component
## 컴포넌트 기본적인 컴포넌트를 만들어 보자. ```javascript import React, {Component} from 'react'; class MyComponent extends Component{ render() { return ( <div className='hello'> ...
2019-05-084분
react
React 공부하기 2 - JSX
## Create-react-app 라이브러리로 시작 ``` yarn global add create-react-app create-react-app hello-react cd hello-react yarn start ``` ### app.js의 구조 ```javascript import React from 'react'; import logo fr...
2019-05-083분
react
React 공부하기 1 - background
## 리액트 요약 기존에 많은 자바스크립트 기반 프레임워크들이 있었는데, 대부분의 프레임워크들은 MVC (Model-View-Controller), MVVM(Model-View-View Model), MVW(Model-View-Whatever) 아키텍쳐를 사용하여 개발되었다. ![MVC](https://mdn.mozillademos.org/files/1...
2019-05-084분

Page 5 ←