[React] React 에서의 Style, className, props란?

JSX란?

    React에서는 본질적으로 렌더링 로직이 UI 조직에 따라 state가 변하는 방식, 화면에 표시하기 위해 사용됩니다.

    JSX에서 태그에 style에서는 HTML과 다르게 background-color 가 아닌 backgroundColor로 사용합니다.

    camelCase를 사용한다고 생각하면 됩니다.

function App() {
  const name = "react";
  const style = {
    backgroundColor : "black",
    color : "aqua",
    fontSize : 24,
    padding : "1rem"
  }

  return (
    <>
      <Hello/>
      <div style = {style}>{name}</div>
    </>
  );
}

또한 classname을 설정할 때도, class = 가 아닌, className = 으로 설정해야 합니다.

function App() {
  const name = "react";
  const style = {
    backgroundColor : "black",
    color : "aqua",
    fontSize : 24,
    padding : "1rem"
  }

  return (
    <>
      <Hello/>
      <div style = {style}>{name}</div>
      <div className = "gray-box"></div>
    </>
  );
}

.gray-box {
  background:gray;
  width : 64px;
  height: 64px;
}

주석을 활용하는 경우에는  {/* */}를 사용합니다. 중괄호를 감싸면 화면에 보이지가 않습니다.

propos란?

  propos는 prpoerties의 줄임말이다. 어떤 값을 Component에 전달하고자 할 때, 사용합니다.

 

예를 들어, App Component에서 name이라는 값을 전달하고자 할 때, 아래와 같이 작성하면 됩니다.

App.js

import React from "react";
import Hello from "./Hello";

function App() {
  return (
  	<Hello name = "react" color = "red">
  )
}

export default App;

Hello.js

import React from "react";

function Hello({name, color}) {
	return <div style = {{color}}>
    	안녕하세요. {name}
    </div>
}

export default Hello;

1만약 Props에 값을 지정하지 않고, 기본값으로 가져가고 싶다면, defaultProps를 지정하면 됩니다.

Hello.defaultProps = {
    name : "이름 없음"
}

props.children을 랜더링을 하면 보일 것입니다.

prpos.children은 Component tag사이에 넣은 값을 조회하고 싶을 때 사용합니다.

App.js
import React from "./react";
import Hello from "./Hello";
import Wrapper from "./Wrapper";

function App() {
	return() {
    	<Wrapper>
        	<>
            	<Hello name = "안녕" color = "red">
                <Hello color = "pink">
            </>
        </Wrapper>
    };
}


Wrapper.js

import React from "react";

function Wrapper({children}){
    const style = {
        border : '2px solid black',
        padding : '16px',
    };
    return (
        <div style = {style}>
            {children}
        </div>
    )
}

export default Wrapper;