[리액트기초] 3) App 컴포넌트 / Debugging Tool / JSX

크롬 개발자 도구로 react관련 앱 다운받으면 component로 해당 사이트에서 구성하는 컴포넌트들을 확인할 수 있다.

 

 

컴포넌트 표시가 안되는 부분은 순수 자바스크립트임

 

- state는 그 컴포넌트에서 가진 데이터

- props는 부모로부터 받아온 데이터가 props

 

 

JSX

 

- 분명 자바스크립트 코드인데 html과 비슷한 코드가 쓰여지는 중

app.jsx

import React from 'react';
import './app.css';

function App() {
  return <h1>Hello :)</h1>
}

export default App;

자바스크립트 코드위에서 간단하게 html처럼 쓸 수 있게 만들어진게 jsx

 

html

class / onclick / 마크업언어

 

jsx

className / onClick / 자바스크립트언어 -> 나중에 바벨이 이것을 모두 html과 자바스크립트로 변화함

{} 를 이용하면 로직사용가능

jsx는 한가지 태그로 감싸줘야함. 두 가지의 자식노드를 이용할때는 묶어야함.

 

묶기위해 원래 div를 씀. 근데 스타일링할때가 아니면 디브 낭비이다!

 

하지만 이제는 React.Fragment 이용하면 가능

아니면 <> 로 이용하면 프래그먼트와 같음!

 

JSX는 다수의 태그를 리턴못함 그래서 묶어서 해야함.

 

import React from 'react';
import './app.css';

function App() {
  const name = 'dadong';
  return (
  <>
  <h1>Hello :) {name}</h1>
  <h1>방가방가</h1>
  </>
  );
}

export default App;

<> 와 </>로 묶어줌

 

아래 방법으로도 가능 -> 여러 자식을 그룹화할 수 있음!

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

 

 

 

사용자 정의 컴포넌트는 반드시 대문자로 시작해야합니다

Element가 소문자로 시작하는 경우에는 <div> 나 <span> 같은 내장 컴포넌트라는 것을 뜻하며 'div' 나 'span' 같은 문자열 형태로 React.createElement에 전달됩니다. <Foo />와 같이 대문자로 시작하는 타입들은 React.createElement(Foo)의 형태로 컴파일 되며 JavaScript 파일 내에 사용자가 정의했거나 import 한 컴포넌트를 가리킵니다.

컴포넌트의 이름은 대문자로 시작하는 것을 추천합니다. 만약 소문자로 시작하는 컴포넌트를 사용해야 한다면, 대문자로 시작하는 변수에 할당한 뒤 JSX에서 이 변수를 사용하세요.

예를 들어 아래의 코드는 예상대로 실행되지 않을 것 입니다.

 

출처

ko.reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized

JSX 이해하기 – React

 

코드블럭을 이용해서 배열에 데이터 넣고 사용가능

 

=> jsx : 자바스크립트 코드와 html 섞어서 사용가능!

 

import React from 'react';
import './app.css';

function App() {
  const name = 'dadong';
  return (
  <>
  <h1>Hello :) {name}</h1>
  {
    ['😺','👻'].map(item => (
      <h2>{item}</h2>
    ))}
  </>
  );
}

export default App;