JSX와 Component

목차

1. Hello React !
2. JSX
   • JSX란 ?
   • 표현식
   • JSX의 요소
   • JSX에서의 이벤트 처리
3. Component
   • 컴포넌트란 ?
   • 어떻게 불러올까 ?
   • 컴포넌트 생성
   • 컴포넌트 인스턴스 생성
   • 계산 및 조건문은 ?
   • 컴포넌트 내의 this와 이벤트 리스너

---

Hello React !

• React에서는 본질적으로 렌더링 로직이 UI 로직과 연결된다.

  • UI로직 : 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 ..

• React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하지만 !

  둘 (마크업, 로직) 포함하는 "컴포넌트"라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리한다.

---

JSX

1. JSX란 ?

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

위의 문법은 문자열도, HTML도 아닌 JSX 이다.

• JSX는 JavaScript를 확장한 문법이다.
• JSX는 React "엘리먼트(element)"를 생성한다.

2. 표현식

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDom.render(
	element,
	document.getElementById('root')
);

name이라는 변수 선언 후, 중괄호로 감싸 JSX 안에서 사용했다.

• JSX의 중괄호 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있다.
• 즉, JSX 내에서 자바스크립트 표현식을 사용하고 싶을 때에는 { } 내에 작성해주자.

3. JSX의 요소

   • JSX 요소는 변수에 할당 및 함수에 전달, 객체나 배열에 저장한 것이 JS 표현식과 같다.

   • HTML처럼 JSX요소에 attribute 추가또한 가능하다.

     • 📣 JSX에서는 class를 className으로 써주기.

4. JSX에서의 이벤트 처리

function funcTest(){
	alert('hello');
}

<button onClick={funcTest} />

• 이벤트 리스너 attribute의 이름은 on으로 시작하자.

---

Component

1. 컴포넌트란 ?

• 리액트 App은 컴포넌트들로 구성되어 있다.

  • 컴포넌트 : HTML 일부를 랜더링하기 위한 하나의 작업에서의 작고 사용가능한 코드.

2. 어떻게 불러올까 ?

import React from 'react'; // 리액트 라이브러리 불러오기
import ReactDOM from 'react-dom'; // DOM에 반응하는법

• 다음과 같은 방법으로 리액트 라이브러리를 불러오거나 DOM에 반응할 수 있다.

3. 컴포넌트 생성

import React, { Component } from 'react';

class aaa extends Component { // 클래스 컴포넌트 / rcc 단축키
    render() {
        return (
            <div>
                
            </div>
        );
    }
}

export default aaa;

import React from 'react';

const aaa = () => { // 함수 컴포넌트 / rsc 단축키
    return (
        <div>
            
        </div>
    );
};

export default aaa;

• 다음과 같이 두가지 방법으로 컴포넌트 생성이 가능하다.

• 클래스명은 반드시 대문자로 시작하는 카멜케이스 방식으로 작성할 것 !

• 클래스 컴포넌트 내에는 반드시 render( )가 포함되어야 한다.

  • render( ) 메소드는 반드시 return 포함해야 한다.

4. 컴포넌트 인스턴스 생성

<aaa></aaa>

• 다음과 같이 클래스를 만들고 나면 컴포넌트 인스턴스 생성이 가능하다.

5. 계산 및 조건문은 ?

import React, { Component } from 'react';

class aaa extends Component { 
    render() {
      // 리턴이 되기 전에 조건문이나 계산을 해주도록 하자.
      const sum = 1 + 2;
        return (
            <div>
                <h1>Sum is {sum}</h1>
            </div>
        );
    }
}

export default aaa;

• 리턴이 되기 전에 조건문 또는 계산을 해주도록 하자.

6. 컴포넌트 내의 this와 이벤트 리스너

import React, { Component } from 'react';

class aaa extends Component { 
  testFunc(){
    alert('hello ?!');
  }
    render() {
        return (
            <div>
                onClick={function(e){ // 이벤트 핸들러를 메소드로 정의함.
              e.preventDefault();
              this.testFunc // this는 컴포넌트 인스턴스를 지칭한다. 
            }}
            </div>
        );
    }
}

export default aaa;

---

다음으로는 State와 Props에 대해 알아보자.