React 컴포넌트 & JSX 문법

React Component

: 전체 UI를 구성하는 각 부분

특징

• props를 입력(=input)받아서 React Element를 반환(=return)함 (JavaScript의 함수와 유사)
  • React Element : 화면에 어떻게 표시되는지를 기술함

표현 방법

1. 함수형

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

function App () {
  return <div>Hello</div>
}

2. 클래스형 (현재는 거의 사용하지 않음)

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

주의사항

• 컴포넌트 이름의 첫글자는 반드시 대문자로 설정한다. (ex. App())
• 폴더는 소문자로 시작하는 camel-case로 작성한다. (ex. thisFolder)
• 컴포넌트를 만드는 파일은 대문자로 시작하는 camel-case로 작성한다. (ex. ThisComponent.jsx)

---

App.jsx 구조

App.jsx : 실제로 개발이 진행되는 페이지

// import가 이루어지는 구역
import logo from "logo.svg";
import "App.css";

function App() {
  // JavaScript 코드가 작성되는 영역
  console.log("Hello");
  return (
    // JSX 코드가 작성되는 영역
    <div>
      <img src={logo} />
      <p className="hi">Hello</p>
    </div>
  );
}

// export가 이루어지는 구역
export default App;

---

JSX 문법

React에서 View를 그리는 방법
1. JSX 문법을 사용하여 React 요소를 만든다.
2. 해당 요소를 DOM에 렌더링 시킨다.

JSX = JavaScript + XML

• JavaScript를 확장한 문법

주요 특징

1. 태그는 반드시 닫는다. (<div></div>)
2. 최상위 태그는 반드시 1개여야만 한다. (<div></div> 또는 <></>)
3. 출력값이 여러 줄인 경우, 괄호()를 사용한다.

return (
  <div>
    <p>Hello</p>
  </div>
)

4. JavaScript 요소는 중괄호{} 안에 넣어서 사용한다.

function App() {
  const num = 1;
  return <div>{num}</div>;
}

5. 주석은 {/* ~ */} 형태로 표현한다.

return <div>{/* 주석입니다. */}</div>

6. class가 아닌 className을 사용한다.

// .js
<div class="classEx"></div>

// .jsx
<div className="classEx"></div>

7. Style을 JSON 형태로 표현한다.

function App() {
  const style = {
    color: 'white',
    background: 'black'
  };
  
  return (
    <div className="App">
      <p style={style}>styled-content</p>
    </div>
  );
}