React.js - 리액트 기초 문법

리액트를 공부하며 습득한 기초 문법들을 정리한 글입니다. 학습을 진행하며 내용을 추가하도록 하겠씁니다.

 

1. render

render는 페이지에 어떤 컴포넌트나 요소를 전달하여 전시하도록 하는 기능입니다.

 

1. render()

 

React 엘리먼트를 루트 DOM 노드에 렌더링하려면 ReactDOM.render()로 전달하면 됩니다.

 

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<h1>Hello, React</h1>, document.getElementById("root"));

2. JSX로 render()

 

JSX문법을 사용하여 렌더링할 수 있습니다.

 

import React from 'react';
import ReactDOM from 'react-dom';


function helloName(name){
  return name.nickName;
}

const name = {
  nickName : "닉네임입니다."
}

const hello = <h1>hello {helloName(name)}</h1>

ReactDOM.render(hello, document.getElementById("root"));

3. 클래스 속성을 추가하여 render()

 

리액트에서는 클래스 속성을 추가하여 렌더링할 때 class가 아닌 className 이라는 단어를 사용해야 하고, 작은 따옴표가 아닌 큰 따옴표로 감싸야 합니다.

import React from "react";
import ReactDOM from "react-dom";

const element = <h1 className="Hi">Hello, World</h1>;

ReactDOM.render(hello, document.getElementById("root"));

 

 

4. JS 코드를 JSX로 변환 후 render()

 

JS로 작성된 코드를 JSX문법으로 변환하여 렌더링하는 방법입니다.

 

import React from "react";
import ReactDOM from "react-dom";


// 현재 시간을 출력하는 JS 코드
// let clock = document.getElementById("clock");  

// setInterval(function(){
//   clock.innerHTML = new Date().toLocaleDateString();
// }, 1000);

function clock(){
  const element = (
    <div>
      <h2>지금은 {new Date().toLocaleTimeString()}입니다.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById("root"));
}
setInterval(clock, 1000);

 

5. 함수형 컴포넌트를 render()

 

함수형 컴포넌트를 사용하여 렌더링하는 방법입니다. 

import React from 'react';
import ReactDOM from 'react-dom';


function Hello(){
  return <h1>Hello, World</h1>
}

const element = <Hello/>

ReactDOM.render(element,document.getElementById("root"))

결과물

 

6. 함수형 컴포넌트에서 props를 사용하여 render()

import React from 'react';
import ReactDOM from 'react-dom';


function Hello(props){
  return <h1>Hello,{props.name}</h1>
}

const element = <Hello name="이름입니다."/>

ReactDOM.render(element,document.getElementById("root"))

 

 

 

---

 

 

2. 컴포넌트의 사용

 

1. Props를 사용해 속성 전달

 

부모에서 자식으로 넘겨준 속성은 읽기 전용 (Read-Only) 처럼 사용할 수 있다. 요소를 변경할 순 없다.

import React from 'react';
import ReactDOM from 'react-dom';

function formDate(date){
    return date.toLocaleDateString();
}

function Avatar(props){
    return (
        <div>
            <img className='Avatar' src='' alt=''></img>
            <div>{props.user.name}</div>
        </div>
    )
}

function Comment(props){
    return (
        <div className='comment'>
            <Avatar user={props.author}/>
            <div>{props.text}}</div>
            <div>{props.date}</div>
        </div>
    )
}

const comment = {
    date : formDate(new Date()),
    text : "안녕하세요~",
    author : {
        name: "한원석",
        avatarURL: "#"
    }
}

ReactDOM.render(<Comment 
    date={comment.date} 
    text={comment.text} 
    author={comment.author}/>,
    document.getElementById('root')
);

결과물