2. React 기초
1) 용어
- 엘리먼트: 컴포넌트의 인스턴스, 컴포넌트 클래스
2) 특징
- React 엘리먼트를 <body>에 직접 렌더링하지 않는다.(충돌 위험)
- 경고와 오류 메시지가 제공
3) React.createElement 메소드
- 엘리먼트 생성 메소드
- 전달하는 매개변수의 제한 없음
- React.createElement(elementName, data, child)
elementName: 태그명 or 컴포넌트 클래스 객체
data: 속성 or 상위 컴포넌트에서 받는 값
child: 자식 엘리먼트 or 태그 내부에 작성하는 텍스트
- 예시
React.createElement('h1', null, 'Hello world!')
- 코드 간소화
React.DOM.h1(null, 'Hello world!)
- 코드 간소화2
const E = React.createElement
E('h1', null, 'Hey')
4) ReactDOM.render 메소드
- 엘리먼트 렌더링 메소드
- 하나의 엘리먼트만 인자로 전달 가능
- ReactDOM.render(element, container[, callback])
element: 태그명 or React 엘리먼트
container: 대상 컨테이너
- 예시
ReactDOM.render(h1, document.getElementById('content'))
5) 컴포넌트 클래스 생성
- 컴포넌트 클래스를 이용해서 컴포넌트 객체 생성 가능
- 장점: 개발 효율 증대, 버그 감소, 독립적이면서도 범용성이 좋은 객체 생성 가능
- 특징
컴포넌트 클래스에는 render() 메소드를 반드시 작성(엘리먼트 반환 메소드)
컴포넌트 클래스의 render() 메소드도 엘리먼트 하나만 반환
React 컴포넌트를 담는 변수의 이름은 대문자로 시작(JSX 사용시)
생성자의 이름은 반드시 constructor()를 사용한다.(미 선언시 super() 호출을 가정)
- 예시
let h1 = React.createElement('h1', null, 'Hello world!')
class HelloWorld extends React.Component{
constructor(props) {
super(props)
}
render() { return React.createElement('div', null, h1, h1) }
}
ReactDOM.render(
React.createElement(HelloWorld, null),
document.getElementById('content')
)
6) 속성
- 속성: 컴포넌트 내부에서는 변경할 수 없는 값
- 부모 컴포넌트는 자식 생성 시점에 속성 할당
- 자식 엘리먼트에서는 속성을 수정하지 않아야 함
- 컴포넌트 생성시 입력받은 속성과 일치하는 HTML 속성이 있으면 HTML에 렌더링
- this.props 객체를 통해 접근 가능
- 예시
React.createElement('a', {href: 'http://www.naver.com'}) // href 속성 정의
React.createElement('h1', this.props, 'Hello' + this.props.name + ' World')
-> this.props 객체를 매개변수에 입력하면 부모의 속성 전부 전달됨
7) 상태
- 상태: 컴포넌트의 변경 가능한 데이터 저장소(this.state 객체에 속한 모든 키-값 쌍)
- 상태 객체의 값은 반드시 객체 타입이어야 한다.
- this.state 객체를 통해 접근 가능
- 사용 방법: 먼저 상태를 초기화해야 사용 가능
class HelloWorld extends React.Component{
constructor(props) {
super(props)
this.state = { name: 'React' }
}
8) 상태 객체의 활용
- this.setState(data, callback) 함수를 사용해서 상태 변경 가능
- setState()함수는 render()를 실행
- setState()함수는 비동기로 작동 -> 콜백 함수에 의존성을 주면 버그 발생 소지 존재
- setState()를 사용하지 않고 직접 속성을 수정하는 것은 안티 패턴
- 예시
class Clock extends React.Component {
constructor(props) {
super(props)
this.launchClock()
this.state = {currentTime: (new Date()).toLocaleString()}
}
launchClock() {
setInterval(()=> {this.setState({currentTime: (new Date()).toLocaleString() }) }, 1000)
}
render() { return <div>{this.state.currentTime}</div> }
}
9) 상태 객체와 속성
- 상태 객체와 속성은 모두 클래스의 멤버
- 속성: 변경 불가 / 부모 컴포넌트에서 전달 / 뷰 생성시 정의
- 상태 객체: 변경 가능 / 컴포넌트 자체에서 정의 / 해당 컴포넌트에서 설정 후 갱신
10) 상태비저장 컴포넌트
- 상태비저장 컴포넌트: 상태 객체가 없는 컴포넌트, 옺기 뷰를 렌더링하기 위해 사용
- 특징
컴포넌트 메소드, 다른 React의 라이프 사이클 이벤트 및 메소드를 갖지 않음
인자로 속성을 전달받아 뷰를 반환하는 함수 생성 가능
- 예시
const HelloWorld = function(props){
return <h1 {...props}>Hello {props.frameworkName} world!!!</h1>
}
11) 상태비저장 컴포넌트vs 상태저장 컴포넌트
- HTML 렌더링 처리로 충분한 경우 상태비저장 컴포넌트를 사용함
- 일반 컴포넌트 대신 상태비저장 컴포넌트를 가능한 많이 사용하는걸 권장
- 예시
const DigitalDisplay = function(props) {
const locale = time => (new Date(time)).toLocaleString('EU')
return <div>{locale(props.time)}</div>
}
'프로그래밍 > React' 카테고리의 다른 글
| [React 요약 정리] 4. React 컴포넌트 라이프사이클 이벤트 (0) | 2019.02.10 |
|---|---|
| [React 요약 정리] 3. JSX (0) | 2019.02.10 |
| [React 요약 정리] 1. React 개요 (0) | 2019.02.10 |