[React] 리액트 프로젝트 시작 (누구든지하는 리액트3편 공부정리)

* velopert.com/3626 에서 제가 필요하다고 생각하는 부분을 공부해 정리했습니다.

 

react를 작성하다보면 조건에 따라 다른 부분을 리턴하도록하는 경우가 많다

자주 사용하는 방법은 1. 삼항연산자 2. &연산자이나 다른 방법이 궁금했는데 즉시실행함수를 사용하면 가능하다

{ }안에 조건에 따라 다른 jsx를 리턴하도록 해준다

import React from "react";

const App = () => {
  const value = 1;
  return (
    <div>
      {(function () {
        if (value === 1) return <div>1</div>;
        if (value === 2) return <div>2</div>;
        if (value === 3) return <div>3</div>;
      })()}
    </div>
  );
};

export default App;

 

 

switch 문이나 화살표함수를 써도 된다 (this, arguments, super 개념이 없는 익명함수)

(() => {
  if (value === 1) return (<div>하나</div>);
  if (value === 2) return (<div>둘</div>);
  if (value === 3) return (<div>셋</div>);
})()

 

stye을 설정할 때 스타일 객체를 넣어주는 경우에는 camelCase로 속성이름을 써준다

import React from "react";

const style = {
  width: "100vw",
  height: "100vh",
  background: "black",
  padding: "16px",
  color: "#fff",
  fontSize: "28px",
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
};
const App = () => {
  const value = 1;
  return <div style={style}>style test</div>;
};

export default App;