[React.js] Ex01_basic 리액트 JSX 문법의 특징

리액트에서 사용되는 JSX문법에 대해서 배우다.

---

 

import './App.css'

/*
  shift + alt + f : prettier 저장

  JSX문법
   - HTML 과 JS를 하나의 파일에 작성할 수 있는 문법
  
   JSX문법의 특징
   1. 반드시 부모요소가 하나여야 한다. 모든 것을 감싸는 div태그로 해결
    + 꼭 <div>가 아니어도 된다. <> </>

   2. 표현식 사용
   {변수}로 표현식
   단, if문은 사용할 수 없다..
   
   2-1. 조건식이 1개일 때 - && 연산자
   하나의 조건식을 확인할 때 A && "B"
   => A가 true이면 &&의 오른쪽이 출력된다.
   
   2-2. 조건식이 2개일 때 - 삼항연산자 활용
   2-3. 조건식이 3개일 때 - return문 위에 조건식을 만든 후 
                           결과값만 {}에 넣어준다.
   3. 기존 HTML문법과 다른 점
    3-1. class속성 -> ClassName으로 속성 적용 => Class 문법과 혼동되지 않기위함
        => 개발자도구로 검사하면 class로 들어가는 것을 볼 수 있음
    3-2. HTML문법을 사용할 때 반드시 소문자로 작성
        - 대문자로 정의하는 것은 '컴포넌트'로 인식
    3-3. HTML문법 내 내용이 없어도 끝 태그는 반드시 작성
    3-4. onclick 속성 -> onClick 속성 (대문자)
      => onClick 소괄호 내의 콜백함수 화살표함수

  4. 스타일 적용
    4-1. css 파일 내 스타일 정의
        - import로 css파일 경로 설정
    4-2. 객체형태로 정의  
        - HTML문법 내 style 속성 정의
        - style 속성 내 객체형태의 스타일 정의 {{key : value}}
*/

function App() {
  let msg = 'Hello React!'
  let isLogin = true
  let name = '임승환'

  let text = ''

  if (name === '선영표') {
    text = 'Front-end'
  } else if (name === '임승환') {
    text = 'Bakc-end'
  } else {
    text = 'DB'
  }

  // 카멜케이스로 작성하기
  const stylede_1 = {
    color: 'green',
    backgroundColor: 'black',
  }

  return (
    <div className="container">
      <div className="item" style = {stylede_1}>{msg}</div>
      <div style = {{color : "blue", fontSize : "20px"}}>스타일 객체 적용</div>

      {/* 조건부 렌더링 */}
      {/* 조건식이 하나일 때 */}
      {isLogin && '환영합니다~!'}

      {/* 조건식이 두개일 때 - 삼항연산자*/}
      {name === '임휘훈' ? <p>환영합니다~!</p> : <p>이용할 수 없습니다..</p>}

      {/* 조건식이 세개일 때 - 조건식을 만든 후 결과만 출력 */}
      <p>{text}</p>
      <p>
        <button onClick={() => console.log('클릭')}>클릭</button>
      </p>
    </div>
  )
}

export default App

App.js파일이 index.js에 컴포넌트로 되어있기 때문에 App.js문서를 작성하면 그대로 페이지에 보인다. App 함수 내에서 작성할 때 JSX문법을 사용해야 한다. 

리액트 기본 구조 실행 과정

결론은 app.js와 같은 컴포넌트들을 index.js에 불러와서 index.html이 화면에 띄워지는 실행 원리이다.

---

1. JSX 문법 정의

JSX 문법 사용 범위

JSX문법이란 HTML과 JS를 하나의 파일에 작성할 수 있는 문법이고 컴포넌트인 App.js에서 JSX문법을 사용한다.

---

2. JSX 문법 특징

1. 1개의 부모요소

JSX문법의 큰 특징은 HTML을 작성할 때 모든 것을 감싸는 태그가 존재해야 한다. 무슨 말이냐면 부모요소가 반드시 하나여야 한다는 것이다. HTML은 return() 소괄호 안에서 작성하는데 여기서 지켜야 하는 특징이다.

  return (
    <div className="container">
      <div className="item" style = {stylede_1}>{msg}</div>
      <div style = {{color : "blue", fontSize : "20px"}}>스타일 객체 적용</div>

      {/* 조건부 렌더링 */}
      {/* 조건식이 하나일 때 */}
      {isLogin && '환영합니다~!'}

      {/* 조건식이 두개일 때 - 삼항연산자*/}
      {name === '임휘훈' ? <p>환영합니다~!</p> : <p>이용할 수 없습니다..</p>}

      {/* 조건식이 세개일 때 - 조건식을 만든 후 결과만 출력 */}
      <p>{text}</p>
      <p>
        <button onClick={() => console.log('클릭')}>클릭</button>
      </p>
    </div>
  )

위 코드블럭을 보면 return 내부에 모든 HTML을 감싸는 div태그가 있다. 만약 부모요소가 여러 개라면 오류가 날 것이다.

---

2. 표현식 사용

{} 중괄호를 사용해서 JS에서 정의한 변수를 return 내부의 HTML에서 사용할 수 있다.

let msg = 'Hello React!'

return(
	<div className="item" style = {stylede_1}>{msg}</div>
    )

 

return 이전의 공간은 JS를 적는 공간이다. JS로 msg를 정의하고 HTML에서 중괄호를 사용해서 표현식을 사용한 모습이다.

2 - 1. 표현식에서 if 사용하는 법 => 조건식이 1개일 때 && 연산자

  let isLogin = true
  
        {/* 조건부 렌더링 */}
      {/* 조건식이 하나일 때 */}
      {isLogin && '환영합니다~!'}

조건식이 1개일 때 조건식의 참 거짓을 확인하는 방법은 && 연산자를 사용하는 것이다.

사용하는 방법은 A && "B" 

=> A가 true면 B가 출력된다.

출력 결과

2 - 2. 조건식이 2개일 때 - 삼항 연산자

      {/* 조건식이 두개일 때 - 삼항연산자*/}
      {name === '임휘훈' ? <p>환영합니다~!</p> : <p>이용할 수 없습니다..</p>}

조건식이 2개일 때는 삼항 연산자를 사용한다.

조건식 ? true 일 때 실행 : false 일 때 실행

 

2 - 3. 조건식이 3개일 때

  let text = ''

  if (name === '선영표') {
    text = 'Front-end'
  } else if (name === '임승환') {
    text = 'Bakc-end'
  } else {
    text = 'DB'
  }
  
        {/* 조건식이 세개일 때 - 조건식을 만든 후 결과만 출력 */}
      <p>{text}</p>

조건식이 3개 이상일 땐 JS에서 조건식을 만들고 그 결과를 HTML에서 표현식으로 결과만 출력해 준다.

사실 조건식이 1개 2개일 때도 이 방법을 사용하면 될 것 같긴 한데, 여러 가지 방법을 알면 좋고 1, 2 방법을 사용하면 코드가 짧아지기도 해서 알고 있는 것이 좋아 보인다.

---

3. 기존 HTML문법과 다른 점

이렇게만 보면 HTML문법과 크게 달라 보이지 않지만 태그의 속성값을 적는 방법이 다르다.

기존의 HTML에서는 클래스 속성값을 주기 위해서 class를 사용했지만 JSX는 className을 사용한다. 

내가 알기론 JS의 Class 문법과 혼동되지 않기 위해서 className으로 사용한다고 들었는데 아닐 수도 있다.

2가지 단어가 합쳐진 속성이름은 카멜케이스로 적는다. (2번째 단어의 첫 번째 스펠링이 대문자)

---

4. 스타일 적용

4 - 1. css 파일 내 스타일 정의

import './App.css'

import로 CSS파일을 불러와서 사용한다.

 

4 - 1. 객체형태로 정의

<div style = {{color : "blue", fontSize : "20px"}}>스타일 객체 적용</div>

HTML문법 내 style 속성 정의하듯이 태그 내에 스타일을 적용할 수 있다. 

style 속성 내 객체 형태의 스타일 정의 {{key : value}}

결과