3. 기본문법 이해하기

# 리액트의 기본문법 이해하기

리액트는 특이한점이 있는데 하나의 태그만 리턴해 준다.

그래서 하나의 태그안에 다른 태그들을 넣어줘야만 문법적 오류가 발생하지 않는다.

아래와 같이 <div> 태그안에 <h1>태그를 넣은것을 볼 수 있다.

var 타입을 쓰지 않아야 하는 이유는 var는 일종의 전역변수로 역할을 하므로, let이나 const를 사용하여 해당 function 에서만 사용하도록 해야한다. var로 선언을 하면 나중에 어려워 지므로 let으로 하는걸 추천한다.

// 0. React 엔진 - 데이터 변경감지에서 UI 그려주는!!
// 1. 실행과정 (index.html) - SPA
// 2. JSX 문법

// (1) return 시에 하나의 Dom만 리턴할 수 있다.
// (2) 변수선언은 let혹은 const로만 해야함.
// (3) if 사용 불가능 X -> 삼항 연산자 (조건 ? 값(true) : 값(false))
function App() {
  return (
    <div>
      <div>안녕 하세요!! 이곳에 오신걸 환영 합니다.</div>
      <h1> 해딩 태그 넣기 </h1>
      <hr />
    </div>
  );
}

let과 const의 차이

let은 변수이고 consts는 상수 이다.

리액트에서 변수를 선언하는 방법

{} 중괄호 안에 변수 값을 넣어주면 된다.

let a = 10; //변수
const b = 20; //상수

function App() {
  return (
    <div>
      <div>안녕 {a}</div>
      <h1> 해딩태그</h1>
      <hr />
    </div>
  );
}

export default App;

리액트 에에서는 if문을 사용할 수 없으므로 아래와 같이 삼항 연산자를 사용해야 한다.

삼항 연산자 문법 (중요하다)

(조건 ? 값(true) : 값(false))

let a = 10; //변수
const b = 20; //상수

function App() {
  return (
    <div>
      <div>안녕 {a === 10 ? '10입니다.' : '10이 아닙니다.'}</div> // 삼항 연산자
      <h1> 해딩태그 {b}</h1>
      <hr />
    </div>
  );
}

결과

조건부 렌더링

(false가 없는 문법, 있으면 보여주고 없으면 안보여주는 문법), (조건 && 값(true))

let a = 10; //변수
const b = 20; //상수

function App() {
  return (
    <div>
      <div>안녕 {a === 10 ? '10입니다.' : '10이 아닙니다.'}</div>
      <h1> 해딩태그 {b === 20 && '20입니다.'}</h1> // 조건부 렌더링
      <hr />
    </div>
  );
}

export default App;

정의되지 않은 변수 undefined

java나 다른언어라면 null 값이라고 표현 되는데, react 에서는 undefined라고 표현 된다.

undefined는 실제 값이며, 정의되지 않은 변수라는 뜻이다. 개발 도중 undefined가 표시되면 값은 있지만 변수가 정의되지 않은 상태라고 볼 수 있다.

function App() {
  let c;
  let d = undefined;
  console.log(1,c); // 브라우저에서 체크 시 undefined라고 나옴.
  return (
    <div>
      <div>안녕 {a === 10 ? '10입니다.' : '10이 아닙니다.'}</div>
      <h1> 해딩태그 {b === 20 && '20입니다.'}</h1>
      <hr />
    </div>
  );
}

css를 활용한 디자인 하기

- 첫번째, 내부에 정의 하는 방법 (추천 안함)

- 두번째, 외부에 정의 하는 방법 (추천)

- 세번째, 라이브러리를 사용하는 방법 (부트스트랩, component-styled)

 

app.css 파일에 디자인 요소를 적용하는 것이 바람직 하다.

app.css 파일 내용

.box-style {
  color: blue;
}

css 내용 적용하기

function App() {
  let c;
  let d = undefined;
  console.log(1, c); // 브라우저에서 체크 시 undefined라고 나옴.
  return (
    <div>
      <div>안녕 {a === 10 ? '10입니다.' : '10이 아닙니다.'}</div>
      <h1 className="box-style"> 해딩태그 {b === 20 && '20입니다.'}</h1> 
      //className을 통해 css 내용이 적용 되었다.
      <hr />
    </div>
  );
}