[React + SpringBoot] 기본 문법

개발자·2022년 3월 21일
0

React

목록 보기
2/2
post-thumbnail

React

JSX 문법

  1. return 시에 하나의 DOM 만 return 할 수 있다.
  • 여러개를 쓰고 싶을 시 다음과 같이 코딩
function App() {
  return <div>
    안녕1
    <div>hi</div>
    <h1>123</h1>
    </div>; 
}
  1. 변수 선언은 let / const 로 해야한다. (var은 스코프 문제가 있음)
    let : 변수
    const : 상수
  • 변수 사용시 다음과 같이 한다.
let a = 10;
const b = 20;

function App() {
  return <div>
    안녕1
    <div>hi {a}</div>
    <h1>123 {b}</h1>
    <hr/>
    </div>; 
}
  1. if 사용 불가능, but 삼항연산자 사용가능하다.
  • 예시
let a = 10;
const b = 20;

function App() {
  return <div>
    안녕1
    **<div>hi {a === 10 ? '10입니다.' : '10이 아닙니다'}</div>**
    <h1>123 {b}</h1>
    <hr/>
    </div>; 
}
  1. 조건부 렌더링 (조건 && 값(true))
  • 예시
function App() {
  return <div>
    안녕1
    <div>hi {a === 10 ? '10입니다.' : '10이 아닙니다'}</div>
    **<h1>123 {b === 20 && '20입니다.'}</h1>**
    <hr/>
    </div>; 
}
  1. 한줄 표현은 return을 () 로 안감싸도 되지만 두줄부터는 ()로 감싸줘야한다.

  2. undefined 는 정의는 되었지만 값은 없는것

  3. css디자인

  • 내부에 적는 방법
function App() {

  const mystyle = {
    color : "red",
  };

  return (
    <div>
      안녕1
      <div style={mystyle}>hi {a === 10 ? '10입니다.' : '10이 아닙니다'}</div>
      <h1>123 {b === 20 && '20입니다.'}</h1>
      <hr/>
    </div>
  ); 
}
  • 외부 파일에 적는 방법

App.css

.box-style {
  color: blue;
}

App.js

function App() {


  return (
    <div>
      안녕1
      <div>hi {a === 10 ? '10입니다.' : '10이 아닙니다'}</div>
      **<h1 className='box-style'>123 {b === 20 && '20입니다.'}</h1>**
      <hr/>
    </div>
  ); 
}
  • 라이브러리 사용(부트스트랩, component-style)

1개의 댓글

comment-user-thumbnail
2022년 4월 10일

동규 선생님 항상 포스팅 보며 감탄하고 있습니다.

답글 달기