React 기초

React는 Facebook에서 만든 JavaScript 라이브러리로, 사용자 인터페이스를 만들기 위해 사용됩니다.

JSX

React에서는 JSX 문법을 사용하여 UI 요소를 만듭니다. JSX는 JavaScript의 확장 문법으로, HTML과 유사한 문법으로 작성할 수 있습니다.

const element = <h1>Hello, World!</h1>;

JSX 규칙

1. JSX에서 여러 엘리먼트를 작성하고자 하는 경우, 최상위에서 opening tag와 closing tag 로 감싸주어야 합니다.
2. React에서 CSS class 속성을 지정하려면 **"className"**으로 표기해야 합니다.
3. JSX에서 JavaScript를 쓰고자 한다면, 꼭 중괄호를 이용해야 합니다.
4. React 엘리먼트가 JSX로 작성되면 "대문자"로 시작해야 합니다. 소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식을 하게 됩니다.
5. 조건부 렌더링은 if문이 아닌 삼항연산자를 이용해야 합니다.
6. React 에서 여러 개의 HTML 엘리먼트를 표시할 때는 "map()" 함수를 사용합니다. map 함수를 사용할 때는 반드시 "key" JSX 속성을 넣어야 합니다. "key" JSX 속성을 넣지 않으면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시됩니다.

Component

React에서는 컴포넌트라는 개념을 사용하여 UI를 구성합니다. 컴포넌트는 독립적으로 작동하는 UI 요소로, 작은 단위로 나누어서 구성할 수 있습니다.

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