[구름EDU|처음만난React#3] Rendering Elements

---

본 게시글은 구름EDU 처음 만난 React 온라인강의를 시청한 후 학습한 정보를 기록하는 목적의 게시글입니다.

생각의 흐름에 따라 작성된 게시글입니다. 가독성이 떨어질 수 있습니다.

처음 만난 React

처음 만난 React(리액트) - 구름EDU

구름 EDU

구름EDU - 모두를 위한 맞춤형 IT교육

---

 

 

Elements?

>Elements are the smallest building blocks of React apps

>React 앱을 구성하는 가장 작은 블록

>Elements는 화면에서 보이는 것을 기술함

Elements의 특징

1. Elements는 불변이다. (children이나 attribute 등)

Elements를 DOM에 랜더링 하기

Root DOM node

const name = "JSX";

const element = <h1>Hello, {name}}!</h1>

ReactDOM.render(

  element,

  document.getElementById('root')

);

Element는 불변인데 어떻게 업데이트해야하지?

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

 

//ReactDOM.render(<App/>, document.getElementById('root'));

 

function tick(){

  const element = (

    <div>

      <h1>Hello, React!</h1>

      <h2>It is {new Date().toLocaleTimeString()}.</h2>

    </div>

  );

  ReactDOM.render(element,

    document.getElementById('root'));

}

setInterval(tick, 1000);

//reportWebVitals();

 

State Change -> Compute Diff -> Re-render

결국 다시 바뀐 부분만 Render하여 보여줌.

이해가 안된다면 DOM에 대하여 더 공부해서 오자.

https://www.oreilly.com/library/view/learning-react-native/9781491929049/ch02.html

Learning React Native

---

{Project Name} / src / index.js

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

 

 

ReactDOM.render(

  <App />,

  document.getElementById('root')

);

 

reportWebVitals();

{Project Name} / src / App.js

import React from 'react';

import logo from './logo.svg';

import './App.css';

import Comment from './Comment'

 

function App() {

  return (

    <div className="App">

      <header className="App-header">

        <img src={logo} className="App-logo" alt="logo" />

        <p>

          Edit <code>src/App.js</code> and save to reload.

        </p>

        <a

          className="App-link"

          href="https://reactjs.org"

          target="_blank"

          rel="noopener noreferrer"

        >

          Learn React

        </a>

      </header>

      <Comment/>

    </div>

  );

}

 

export default App;

 

{Project Name} / src / Comment.js

import React from 'react';

 

class Comment extends React.Component{

    render() {

        return(

            <div>

                <h1>{'My first component!'}</h1>

             </div>

        )

    }

}

 

export default Comment;

CSS적용하기

{Project Name} / src / App.js

import React from 'react';

import logo from './logo.svg';

import './App.css';

import Comment from './Comment'

 

function App() {

  return (

    <div className="App" style={{padding:16, backgroundColor:'#282c34'}}>

      <header className="App-header">

        <img src={logo} className="App-logo" alt="logo" />

        <p>

          Edit <code>src/App.js</code> and save to reload.

        </p>

        <a

          className="App-link"

          href="https://reactjs.org"

          target="_blank"

          rel="noopener noreferrer"

        >

          Learn React

        </a>

      </header>

      <Comment/>

    </div>

  );

}

 

export default App;

{Project Name} / src / Comment.js

import React from 'react';

 

const styles ={

    root:{

        width:'20%',

        margin:'auto',

        marginTop: 16,

        padding: 16,

        textAlign: 'left',

        backgroundColor: 'white',

        borderRadius: 16,

    },

    imageContainer:{

        display: 'inline-block',

        width: '50',

    },

    image: {

        width: 50,

        height: 50,

        borderRadius: 25,

    },

    commentContainer: {

        display: 'inline-block',

        marginLeft: 16,

        textAlign: 'left',

        verticalAlgin: 'top',

    },

    nameText: {

        color : 'black',

        fontszie : 20,

        fontWeight: 700,

    },

    contentText: {

        color: 'black',

        fontszie: 16,

    }

}

 

class Comment extends React.Component{

    render() {

        return(

            <div style={styles.root}>

                <div style={styles.imageContainer}>

                    <img

                        src='https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png'

                        style={styles.image} />

                </div>

                <div style={styles.commentContainer}>

                    <div style={styles.nameText}>

                        {'Jaewon Lee'}

                    </div>

                    <span style={styles.contentText}>

                        {'React는 어려웡...'}

                    </span>

                </div>

             </div>

        )

    }

}

 

export default Comment;

Comment 컴포넌트에 Props 추가하기

{Project Name} / src / Comment.js

...

<div style={styles.commentContainer}>

                    <div style={styles.nameText}>

                        {this.props.name}

                    </div>

                    <span style={styles.contentText}>

                        {this.props.content}

                    </span>

                </div>

...

 

Project Name} / src / App.js

  ...
  <Comment name={'Lee jaewon'} content={'React는 어려웡...'}/>

  <Comment name={'부학회장'} content={'그래도 열심히 해야지....'}/>
  ...

 

Comment 데이터 객체로 분리하기

import React from 'react';

import logo from './logo.svg';

import './App.css';

import Comment from './Comment'

 

const comments = [

  {name : 'Jaewon Lee', content: '리엑트는 어려웡...'},

  {name : '부학회장', content: '그래도 열심히 해야지....'},

  {name : 'Ethan', content: '너희들은 열심히 하구 있니...?'},

]

 

function App() {

  return (

    <div className="App" style={{padding:16, backgroundColor:'#282c34'}}>

      <header className="App-header">

        <img src={logo} className="App-logo" alt="logo" />

        <p>

          Edit <code>src/App.js</code> and save to reload.

        </p>

        <a

          className="App-link"

          href="https://reactjs.org"

          target="_blank"

          rel="noopener noreferrer"

        >

          Learn React

        </a>

      </header>

      <div>

        {comments.map((comment, index) =>{

          return (

            <Comment

              name={comment.name}

              content={comment.content} />

          )

        })}

      </div>

    </div>

  );

}

 

export default App;