반응형

html 태그로 표현되어있는 문법을 createElement 로 변환해준다.

const vdom = <p>
  <h1>헤더</h1>
  <ul>
    <li style="color:red">첫번째</li>
    <li style="color:blue">두번째</li>
  </ul>
</p>

위에 있는 코드가 아래와 같이 변환이 된다.

"use strict";

const vdom = /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("h1", null, "\uD5E4\uB354"), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", {
  style: "color:red"
}, "\uCCAB\uBC88\uC9F8"), /*#__PURE__*/React.createElement("li", {
  style: "color:blue"
}, "\uB450\uBC88\uC9F8")));

출처 : https://babeljs.io/ 에서 변환함.

왜 저렇게 변환이 필요한가?? 

// app.js
const vdom = createElement(
  "p",
  {},
  createElement("h1", {}, "헤더"),
  createElement(
    "ul",
    {},
    createElement("li", { style: "color:red" }, "첫번째"),
    createElement("li", { style: "color:blue" }, "두번째")    
  )
);

// react.js
export function createElement(tag, props, ...children) {
  props = props || {}
  return {
    tag,
    props,
    children,
  };
}

JSX 를 사용하지 않으면 위와같이 코드를 작성해줘야 한다. 하지만 위보다는 html 태그 구조가 눈에 더 잘 들어온다.

한가지 더 기본적으로 JSX 가 변환을 할때에 메소드를 보면 React.createElement를 사용한다. 하지만 위에 작성된 코드에서는 createElement를 사용하고 있다. 이걸 변경해주려면 다음과 같이 표시해 주면된다. 변환된 코드는 아래와 같다.

/* @jsx createElement */
// app.js
const vdom = createElement(
  "p",
  {},
  createElement("h1", {}, "헤더"),
  createElement(
    "ul",
    {},
    createElement("li", { style: "color:red" }, "첫번째"),
    createElement("li", { style: "color:blue" }, "두번째")    
  )
);

실제로 babel 사이트에서 변환된 것을 봐도 변경된 것을 알수 있다.

"use strict";

// app.js
const vdom = createElement("p", {}, createElement("h1", {}, "헤더"), createElement("ul", {}, createElement("li", {
  style: "color:red"
}, "첫번째"), createElement("li", {
  style: "color:blue"
}, "두번째")));

 

728x90
반응형
저작자표시 비영리 변경금지

'Development > Frontend skills' 카테고리의 다른 글

[typescriipt] Union , Narrowing  (0) 2023.02.15
[javascript] webpack.config.js 설정  (0) 2023.01.13
[javascript] 배열 연산의 형태  (0) 2022.12.23
[Javascript] 함수 형태  (0) 2022.12.20
[React] Warning: Each child in a list should have a unique "key" prop.  (0) 2022.08.12
반응형

edX사이트에서 Introduction to ReactJS 강의를 들으면서 정리한 내용입니다. 

 

2018/04/18 - [Development/React] - edX - Introduction to ReactJS Module1 내용정리

 

 

Class Components

- Class Component

Class Component 는 Functional Component 와 다르게 React Component 가 라이프사이클 메소드(Life Cycle method) 와 상태(state) 를 가질수 있도록 해준다. Class Component는 this.state, this.props 를 가지고 있다. 

 

1
2
3
4
5
class Welcome extends React.Component{
    render(){
        return <h1>Hello World!</h1>
    }
}
 cs

 

- Render()

render() 메소드는 Class Component 에서 React Element를 리턴할때 사용된다.

 

- Adding properties to Class Components

Class Component의 property는 this.props 를 통해서 접근가능하다. 

 

1
2
3
4
5
class Welcome extends React.Component{
    render(){
        return <h1>Message: {this.props.message}</h1>
    }
}
 cs

 

1
<Welcome message="Hello World!"/>
 cs

 

State

- Constructor(props)

constructor() 메소드는 React Component 가 mount 되기 전에 호출되며 component의 기본 상태를 설정하는데 사용된다. 

constructor() 메소드 시작에 super(props)를 호출하는것은 중요하다. 안할 경우 this.props 가 정상적으로 동작하지 않을 수 있다. 

constructor() 메소드의 첫번째 파라메터는 component에 전달되는 속성을 나타낸다. 

 

1
2
3
4
5
6
7
8
class Counter extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        return <div>Hello World!</div>
    }
}
 cs

 

- Adding an initial state to Class Component

Class Component 의 state 는 반드시 object 형태로 선언되어야 한다. 

 

1
2
3
4
5
6
7
8
9
class Counter extends React.Component{
    constructor(props){
        super(props)
        this.state = {foo:123,bar:456}
    }
    render(){
        return <div>foo:{this.state.foo} bar:{this.state.bar}</div>
    }
}
 cs

 

- Updating State

setState(updater, [callback]) 을 통해서 상태 업데이트가 가능하다. 상태를 업데이트 하는 것은 비동기식이기 때문에 옵션으로 callback 메소드를 호출하게 할수있다. callback 메소드는 업데이트가 완료되면 호출된다. 

setState 메소드는 component life cycle의 updating 단계를 시작하는 트리거가된다. 이것 때문에 sshouldComponentUpdate() 메소드가 false를 리턴하지 않으면 component가 다시 렌더링 된다. 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class Counter extends React.Component{
    constructor(props){
        super(props)
        //initial state set up
        this.state = {message:"initial message"}
    }
    componentDidMount(){
        //updating state
        this.setState({message:"new message"})
    }
    render(){
        return <div>Message:{this.state.message}</div>
    }
}
 cs

 

- Updating state based on previous state

setState() 메소드는 Component의 상태를 즉시 업데이트 하지 않고 큐에 넣어둔 후 나중에 진행된다. 렌더링을 좀더 효율적으로 하기위해서 batch형태로 업데이트 한다. 

아래 소스에서 setState 메소드를 여러번 호출하지만 state value 는 1만 증가한다. 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class Counter extends React.Component{
    constructor(props){
        super(props)
        //initial state set up
        this.state = {value:0}
    }
    componentDidMount(){
        //updating state
        this.setState({value:this.state.value+1})
        this.setState({value:this.state.value+1})
        this.setState({value:this.state.value+1})
        this.setState({value:this.state.value+1})
    }
    render(){
        return <div>Message:{this.state.message}</div>
    }
}
 cs

 

setState() 메소드는 첫번재 파라메터로 메소드를 사용할수 있으며 기존 상태와 설정을 넘겨준다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class Counter extends React.Component{
    constructor(props){
        super(props)
        //initial state set up
        this.state = {message:"initial message"}
    }
    componentDidMount()
        //updating state
        this.setState((prevState, props) => {
            return {message: prevState.message + '!'}
        })
    }
    render(){
        return <div>Message:{this.state.message}</div>
    }
}
 cs

 

- State is not mutable

State 는 오직 읽기만 가능하기 때문에 임의로 변경해서는 안된다. 

 

Life Cycle Methods

- Mounting Phase Methods

mounting 단계는 component가 생성되거나 DOM 에 렌더링할때 시작된다. 

  • constructor(props) : component 가 처음 초기화할때 오직 한번만 호출된다.
  • componentWillMount() : component 가 mount 하려고 할때 호출된다.
  • render() : component가 렌더링 할때 호출된다.
  • componentDidMount() : component 가 mount 된 후에 호출된다.

- Updating Phase Methods

updating 단계는 component state 또는 properties 가 변경될때 시작된다.

  • componentWillReceiveProps(nextProps) : component 가 update  되고 새로운 props를 받았을때 호출된다.
  • shouldComponentUpdate(nextProps, nextState) : 새로은 props는 받고 update 하려고 할때 호출된다. 이 메소드가 false 이면 componentWillUpdate(), render(),  componentDidUpdate() 는 실행되지 않는다.
  • componentWillUpdate(nextProps, nextState) : update 될때 호출된다. 
  • render()
  • componentDidUpdate(prevProps, prevState) : update  끝나고 호출된다.

- Unmounting Phase Methods

unmounting 단계는 component 가 DOM 에서 제거될때 시작된다. 

  • componentWillUnmount() : component 가 unmount 되고 즉시 호출된다. 

 

Event Handlers

- Adding Event Handlers

React 와 HTML 에서의 이벤트 핸들러 차이

  • React 에서는 JSX {} 을 사용해서 정의한다.
  • React 에서는 이벤트 이름을 쓸때 camelCase 를 사용한다. 
1
2
3
4
5
React
<button onClick = {clickHandler} >Click Me</button>
 
HTML
<button onclick = "clickHandler()" >Click Me</button>
 cs

 

- Binding Event Handlers to Claas Component

이벤트 핸들러는 Class Component 내부에 정의 해야 한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
class Counter extends React.Component{
    constructor(props){
        super(props)
        this.state = {count:0}
        //binding is necessary to make `this` point to the correct object
        this.clickHandler = this.clickHandler.bind(this)
    }
    clickHandler(){
      //increments the count of the state
      this.setState((prevState,props) => {
        return {count: prevState.count + 1}
      })
    }
    render(){
        //renders a button that displays the state count
        return <button onClick = {this.clickHandler}>{this.state.count}</button>
    }
}
 
ReactDOM.render(
  <Counter/>,
  document.getElementById("root")
)
 cs

 

 

728x90
반응형
저작자표시 비영리 변경금지

'Development > Frontend skills' 카테고리의 다른 글

[React] Warning: Each child in a list should have a unique "key" prop.  (0) 2022.08.12
[React] React.useState()  (0) 2022.08.12
edX - Introduction to ReactJS Module1 내용정리  (0) 2018.04.18
[npm] 왠지 자주 쓸것 같은 npm 명령어  (0) 2018.04.17
npm install --save --save-dev  (0) 2017.05.30
반응형

edX사이트에서 Introduction to ReactJS 강의를 들으면서 내용을 정리해봤다.


What is ReactJS?

ReactJS 는 상태에 따라서 View 레이어를 만들어 주는 라이브러리이다.

React Compnents는 Virtual DOM 을 생성한다. ReactCompnent의 상태가 변경되면 새로운 Virtual DOM을 생성하고 차이점을 분석한다. 그리고 효과적인 방법으로 HTML  DOM 에 반영한다.


Rendering Elements

- React Elements

React Elements 는 DOM 노드에 표현되는 Object 이다. JSX를 사용해서 syntax를 작성한다. React Elements와 React Components는 다르다. React Elements를  DOM 에 표현하기 위헤서는 ReactDOM.render() 메소드를 사용해야 한다.


- ReactDOM.render()

ReactDOM.render() 메소드는 HTML DOM의 특정 부분에 React Elements를  렌더링하는데 사용된다. 대부분 React 어플리케이션에는 한개의 root node 가 있고 그 안에 렌더링 되는데 root node가 여러개 있을수도 있다.


1
<div id="root"></div>
cs


1
2
3
4
ReactDOM.render(
        <h1>Hello World!</h1>,
        document.getElementById("root")
)
cs


JSX

- What is JSX?

JSX는 Javascript의 syntax 를 확장한 것으로 HTML 태그를 사용해서 Javascript안에 React Elements를 작성할수 있게 해준다.


1
var element = <h1>Hello World!</h1>
cs


- Using JSX with JavaScript Expressions

Curly braces ({}) 를 사용해서 표현한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var str = "World!" 
var element =  <h1> Hello {str}</h1>
 
var item = {
    name: "Cheese",
    price: 5
}
var element = <p>{item.name} : ${item.price} </p>
 
var length = 20
var width = 10
function calculateArea(x,y){
    return x * y
}
 
var element = <div>The Area is: {calculateArea(length,width)}</div>
cs


- Using JSX with Attributes

Attribute 표현시 절대로 curly braces를 quotes("")로 감싸면 안된다. 


1
 var element = <img src ={product.imageURL}></img>
cs


- Style Object

위에서와 같이 동일하게 style object 를 curly braces  안에 넣어주면 된다.

1
2
3
4
5
6
7
var styleObject = {
        backgroundColor: 'red',
        color:'blue',
        fontSize: 25,
        width: 100
}
var element = <input style = {styleObject}/>
cs


object 로 정의 안하고 바로 사용할 경우에 바깥쪽 {} 는 JSX표현이고 안쪽에 {} 는 style object 를 표현한것이다.

1
var element = <input style = {{width:200,height:100}}/>
cs


- Nested Elements

하나로 wrapping  하는 것을 권장한다.

1
2
3
4
5
6
var element = (
        <div>
            <div>Hello World</div>
            <div>Hello World</div>
        </div>
)
cs



Functional Components

- React Components

React Components는 독립적이고 재사용 가능한 React Element를 만들어 낸다. React Components는 Functional Components 와 Class Components로 구성된다.


- Functional Components

Functional Components는 React Elements를 출력한다. 관습적으로 Function의 첫글자는 대문자로 쓴다.

1
2
3
4
5
6
7
8
function HelloWorld(){
    return <h1>Hello World!</h1>
}
 
ReactDOM.render(
    <HelloWorld />,
    document.getElementById("root")
)
cs


- Properties  추가

Functional Components는 React Elements를 출력한다. 관습적으로 Function의 첫글자는 대문자로 쓴다.

1
2
3
4
5
6
7
8
9
function HelloWorld(props){
    return <h1>Message: {props.message}</h1>
}
 
ReactDOM.render(
    <HelloWorld message="Hello World!"/>,
    document.getElementById("root")
)
 
cs


Composition

- Composing Components

Functional Components 는 다른 Functional Components 를 결과 값으로 포함할 수 있다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function ShoppingTitle(props){
    return (
        <div>
            <h1>{props.title}</h1>
            <h2>Total Number of Items: {props.numItems}</h2>
        </div>
    ) 
}
function ListItem(props){
    return <li>{props.item}</li>
}
function ShoppingList(props){
    return (
        <div>
            <h3>{props.header}</h3>
            <ol>
                <ListItem item = {props.items[0]}/>
                <ListItem item = {props.items[1]}/>
                <ListItem item = {props.items[2]}/>
            </ol>
        </div>
    )
}
function ShoppingApp(props){
    return (
        <div>
            <ShoppingTitle title = "My Shopping List" numItems = "9"/>
            <ShoppingList header = "Food" items = {[ "Apple","Bread","Cheese"]}/>
            <ShoppingList header = "Clothes" items = {[ "Shirt","Pants","Hat"]}/>
            <ShoppingList header = "Supplies" items = {[ "Pen","Paper","Glue"]}/>
        </div>
    )
}
ReactDOM.render(
    <ShoppingApp/>,
    document.getElementById("root")
)
cs


Conditional Rendering

- Conditional Rendering

Functional Components 의 결과값을 프로퍼티에 따라서 결정할 수 있다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
function Feature(props){
    if (props.active == true){
        return <h1>This feature is active</h1>
    }
    else{
        return <h1>This feature is not active</h1>
    }
 
}
 
function Feature(props){
    return <h1>This feature is {props.active? "active" : "not active"}</h1>
}   
cs


Module 1 내용 정리 끝.


728x90
반응형
저작자표시 비영리 변경금지

'Development > Frontend skills' 카테고리의 다른 글

[React] React.useState()  (0) 2022.08.12
[React] edX - Introduction to ReactJS Module2 내용정리  (0) 2018.05.30
[npm] 왠지 자주 쓸것 같은 npm 명령어  (0) 2018.04.17
npm install --save --save-dev  (0) 2017.05.30
map() 메소드 사용  (0) 2017.01.16

+ Recent posts

티스토리툴바