React 입문 2 (컴포넌트, jsx)

 

React Components란?📖

리액트에서 컴포넌트는 UI를 재사용 가능한 개별적인 여러 조각으로 나눈 것을 말합니다! 개념적으로 컴포넌트는 javascript 함수와 유사합니다.

 

함수형 컴포넌트

// props라는 입력을 받음
// 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return)

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 훨씬 쉬운 표현을 해보면 아래와 같죠.
function App () {
	return <div>hello</div>
}

 

클래스형 컴포넌트

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

 

 

JSX란?📖

JSX(javascript syntas eXtension)는 Javscript를 확장한 문법입니다. javascript 에서 html을 작성하듯이 하기 때문에 가독성이 좋습니다.

// 실제 작성할 JSX 예시
function App() {
  return (
    <h1>Hello, GodDaeHee!</h1>
  );
}

// 위와 같이 작성하면, 바벨이 다음과 같이 자바스크립트로 해석하여 준다.
function App() {
  return React.createElement("h1", null, "Hello, GodDaeHee!");
}

 

❓ 여기서 궁금증 브라우저는 JS만 해석할 수 있는 거 아닌가요

 

✨브라우저에서 실행하기 전에 바벨을 사용해 자바스크립트 형태의 코드로 변환이 됩니다.✨

 

문법

1. 반드시 부모 요소로 감싸는 형태여야 합니다.

 

아래 코드와 같이 작성하면 `SyntaxError`가 발생합니다.

가상돔(Virtual DOM)에서 컴포넌트 변화를 효율적으로 감지하기 위해 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문입니다.

const App = () => {
  return (
    <div>안녕</div>
    <div>반가워</div>
  );
}
// SyntaxError

 

 

반드시 부모 요소로 감싸는 형태로 작성해야 합니다!

const App = () => {
  return (
    <div>
      <div>안녕</div>
      <div>반가워</div>
    </div>
  );
}

 

2. 태그는 꼭 닫아주기

태그를 닫아주지 않아도 에러가 발생합니다.

const App = () => {
  return (
    <div className="App">
      <input type='text'>
    </div>
  );
}

에러

태그는 꼭 닫아주세요.

<input type='text'/>

 

3. 자바스크립트 표현식

`중괄호{}`를 이용해 JSX내부에서 자바스크립트 표현식을 사용할 수 있습니다. 값뿐만 아니라 map, 삼항연산자 등 자바스크립트 문법을 JSX 안에 쓸 때도 사용할 수 있습니다!

const App = () => {
  const cat_name = 'perl';
  const number = 1;
  return (
    <div>
      hello {cat_name}!
      <p>{number > 10 ? number+'은 10보다 크다': number+'은 10보다 작다'}</p>
    </div>
  );
}