React Component

class 로 정의

class ClassComponent extends React.Component {
      render() {
        return <div>Hello</div>
      }
    }

→ 선언한 리액트의 컴포넌트가 있는데, 그 컴포넌트를 상속받아서 구현한다는 뜻이다.

ReactDOM.render(
      <ClassComponent />,
      document.querySelector('#root')
    );

→ 리액트 라이브러리 페이지에서 다룬 것 처럼, ReactDOM.render 의 첫번째에는 표시할 내용 , 두번째에는 그 내용을 담을 곳 이다. id가 root 인 곳에 위에서 선언한 ClassComponent 의 return 값을 넣는다.

 

function 키워드를 이용하여 컴포넌트 정의

function FunctionComponent() {
      return <div>Hello</div>;
    }

ReactDOM.render(<FunctionComponent />, document.querySelector('#root'));

function 키워드 사용

const FunctionComponent = () => <div>Hello</div>;

    
ReactDOM.render(<FunctionComponent />, document.querySelector('#root'));

function 키워드 사용

 

React.createElement 로 컴포넌트 만들기

• React.createElement() 구조
• React.createElement( type, //태그이름 문자열 혹은 기존에 작성한 리액트 컴포넌트 ,React.Fragment [props] , // 리액트 컴포넌트에 넣어주는 데이터 객체 [... children] //자식으로 넣어주는 요소들 )

1. 태그 이름 문자열 type

//1 태그 이름 문자열 type
  ReactDOM.render(
    React.createElement('h1', null , `type 이 "태그 이름 문자열" 입니다.`),
    document.querySelector('#root') // 위에 root(실제 DOM) 에다가 위에 생성한 요소를 렌더 한다.
  )

2. 리액트 컴포넌트 type

//2. 리액트 컴포넌트 type
  const Component = () => {
    return React.createElement('p' , null ,`type 이 "React 컴포넌트" 입니다.`);
  }

ReactDOM.render(
    React.createElement(Component,null , null),
    document.querySelector('#root') 
  )

3. React.Fragment

3. React.Fragment
  크리에이트 앨리먼트하면 랜더되는 루트 안에 또하나의 태그가 있어야 그 하우ㅣ 요소들을 표현해줄 수 있다.
  하지만 프래그먼트를 사용하면 최상위요소(태그없이) 자식들이 여러개 나올 수 있다.
  루트에 배열처럼 요소를 넣고싶다는 니즈가 생길 떄 프래그먼트를 쓸 수 있다.
  ReactDOM.render(
    React.createElement(
      React.Fragment ,
      null,
      `type 이 "React Fragment" 입니다.`
			`type 이 "React Fragment" 입니다.`
    ),
    document.querySelector('#root')
  );

Fragment 사용 이유 → createElement 하면 렌더되는 루트 안에 또 하나의 태그가 존재해야한다.

(예: return React.createElement('p' , null ,`type 이 "React 컴포넌트" 입니다.`);

하지만 Fragment 를 사용하면 최상위요소(태그) 없이 자식들이 여러개 나올 수 있다. → 루트에 배열처럼 요소를 넣고싶다는 니즈가 생길 때 프래그먼트를 쓸 수 있다.

Fragment 를 사용하면 이렇게 최상위태그인 div 바로 아래에 생성이 된다.

 

1. 복잡한 리액트 앨리먼트의 모임

<div>
    <div>
      <h1>주제</h1>
      <ul>
        <li>React</li>
        <li>Vue</li>
      </ul>
    </div>
  </div>

만약, 이런 구조의 html 파일이 있고 이걸 React.CreateElement 로 표현하면 다음과 같다.

ReactDOM.render(
      React.createElement(
        'div' , 
        null , 
        React.createElement(
          'div', 
          null, 
          React.createElement('h1', null, "주제"), 
          React.createElement(
            'ul', 
            null, 
            React.createElement('li', null, "React"),
            React.createElement('li', null, "Vue"),
            )
          )
        ),
      document.querySelector('#root')
    )

무조건 모든 요소를 creatElement API 를 활용하여 만든다면 복잡해져서 힘들 수 있다.

 👉 복잡한 리액트 앨리먼트 해결방법은? ⇒ JSX 사용 !

 

JSX 를 사용하면 위에 나온 복잡한 구조를 createElement 를 사용하지 않고 바로 html 문법으로 사용이 가능하며, 컴파일 시 오류를 찾기 쉽다.

• JSX 문법
  • 최상위 요소가 하나여야 한다.
  • 최상위 요소를 리턴하는 경우, () 로 감싸야 한다.
  • 자식들을 바로 랜더링 하고싶으면, <> 자식들</> 를 사용한다.(Fragment)
  • 자바스크립트 표현식을 사용하려면, {표현식} 를 이용한다.
  • if 문은 사용할 수 없다.(삼항연산자 혹은 && 사용)
  • style 을 이용해 인라인 스타일링이 가능하다.
  • class 대신 className 을 이용해 class를 적용한다.
  • 자식요소가 있으면, 꼭 닫아야하고 자식요소가 없으면 열면서 닫아야 한다.( <p></P> 혹은 <br />