edX - Introduction to ReactJS Module1 내용정리

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가 여러개 있을수도 있다.

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

ReactDOM.render(
        <h1>Hello World!</h1>,
        document.getElementById("root")
)

JSX

- What is JSX?

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

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

- Using JSX with JavaScript Expressions

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

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>

- Using JSX with Attributes

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

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

- Style Object

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

var styleObject = {
        backgroundColor: 'red',
        color:'blue',
        fontSize: 25,
        width: 100
}
var element = <input style = {styleObject}/>

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

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

- Nested Elements

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

var element = (
        <div>
            <div>Hello World</div>
            <div>Hello World</div>
        </div>
)

Functional Components

- React Components

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

- Functional Components

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

function HelloWorld(){
    return <h1>Hello World!</h1>
}
 
ReactDOM.render(
    <HelloWorld />,
    document.getElementById("root")
)

- Properties  추가

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

function HelloWorld(props){
    return <h1>Message: {props.message}</h1>
}
 
ReactDOM.render(
    <HelloWorld message="Hello World!"/>,
    document.getElementById("root")
)
 

Composition

- Composing Components

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

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")
)

Conditional Rendering

- Conditional Rendering

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

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>
}   

Module 1 내용 정리 끝.