React (1)

JSX

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

위의 태그문법을 jsx라고 하며 javascript를 확장한 문법으로 보통 React와 함께 사용한다.

<span>{list.word}</span>

위 처럼 JSX의 중괄호 안에는 유효한 모든 javascript 표현식을 넣을 수 있다. 위는 호출 결과인{list.word}를 span 엘리먼트에 포함 시킨것이다.

그리고 JSX는 HTML보다 javascript에 가깝기떄문에, React DOM은 html어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용한다. 예로는 class는 className이되고 tabindex는 tabIndex가 된다.

JSX는 밑의 코드처럼 자식을 포함할 수 있다.

const element = (
  <div>
    <h1>Hello!</h1>
  </div>
);

components

컴포넌트를 정의 하는 방법은 javascipt 함수를 작성하는 것입니다.

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

위 함수는 데이터를 가진 하나의 props 객체 인자를 받고 react 엘리먼트를 반환하므로 유효한 React 컴포넌트이다. 이처럼 함수형으로 정의된 컴포넌트를 함수 컴포넌트라고 한다.

그리고 class를 사용해서 컴포넌트를 정의할 수 있다.

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

React가 사용자 정의 컴포넌트로 작성된 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달하는데 이 객체를 props라고 한다.

컴포넌트는 자신의 출력에 다른 컴포넌트를 참조할 수 있다. React에서는 버튼, 폼, 다이얼로그, 화면 등 모든것이 컴포넌트로 표현된다.

function App() {
  return (
    <div className="App">
      <Box></Box>
    </div>
  );
}

App 컴포넌트안에 Box 컴포넌트를 출력하는 코드이다.