[React] JSX

✅JSX란?

---

React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들인다.

React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리한다.

React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각한다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해준다.

✅JSX 문법 규칙

---

📝 감싸는 요소
컴포넌트에 여러 요소가 있다면 부모 요소 하나로 감싸야 한다.

import React from 'react';

function App(){
	return(
    	<div>
          <h1>Hello</h1>
          <h2>Is it working well?</h2>
        </div>
    )
}

export default App;

📝 자바스크립트 표현

import React from 'react';

// 자바스크립트 표현
function App(){

// 자바스크립트 영역
	const name = 'react';
  
	return(
//HTML 영역
    	<div>
          <h1>Hello! {name}</h1>
          <h2>Is it working well?</h2>
        </div>
    )
}

export default App;

📝 div 등에 class라는 속성을 설정할 때

• 기존 방식

  <div class="classEx1">
     
  </div>

• JSX 방식

  <div className="classEx1">
     
  </div>

📝 React 엘리먼트는 대문자로 시작

function Hello(){
	return <div>Hello!</div>
}
function HelloWorld(){
	return <Hello />
}

✅ 조건부 렌더링

---

📝 삼항 연산자(조건부 연산자)를 사용한 조건부 렌더링

• JSX 내부의 JS표현식에서는 if문 사용이 불가하다. 그렇기 때문에 조건에 따라 다른 내용을 렌더링 하고자 하면 JSX 밖에서 if문을 사용하거나, 중괄호 내부에서 삼항 연산자를 사용하면 된다.

  class App extends Component {
      render() {
          let name = 'React';
          return (
              <div>
                  {
                      name === 'React' ? (
                          <h1>This is React.</h1>
                      ) : (
                          <h1>This is not React.</h1>
                      )
                  }
              </div>
          );
      } 
  }

📝 AND 연산자(&&)를 사용한 조건부 렌더링

• 특정 조건에 만족할 때만 내용을 보여주고 싶을 때 사용한다.

  class App extends Component {
      render() {
          let name = 'React';
          return (
              <div>
                  {
                      name === 'React' && <h1>This is React.</h1>
                  }
              </div>
          );
      } 
  }

📝 OR 연산자(||)를 사용한 조건부 렌더링

class App extends Component {
    render() {
        let name = undefined;
        return (
            <div>
                {
                    name === 'React' || <h1>This is React.</h1>
                }
            </div>
        );
    } 
}

✅ JSX 속성 정의

---

• HTML 엘리먼트에 속성을 정의할 수 있는 것처럼, JSX에서도 엘리먼트에 속성을 정의 할 수 있다.
• JSX는 HTML보다는 JavaScript에 가깝기 때문에 JSX에서는 HTML 엘리먼트에 속성을 정의하는 방식과는 약간 다른 방식으로 속성을 정의 한다.