React 2. JSX?

목차

1. JSX란?
2. JSX로 변수 선언
3. JSX에서  JS표현식 사용하기
4. JSX로 속성 정의하기
5. JSX로 자식 정의하기
6. JSX로 React 엘리먼트(객체) 생성
7. JSX에서 주석 작성하기

 

1. JSX란?

• JSX는 템플릿 언어라기 보다는 자바스크립트 문법의 확장이다.
• 리액트 '엘리먼트'를 생성한다.
• 리액트에서는 기본적으로 렌더링 로직이 UI 로직과 연결 된다는 사실이 깔려있다.
• 별도의 파일에 마크업과 로직을 넣어서 기술을 인위적으로 분리하기보다는, 마크업과 로직 둘을 포함하는 '컴포넌트'로 관심사를 분리한다
• (대충 컴포넌트 안에 HTML과 JS를 한꺼번에 작성 가능하다는 뜻)

 

2. JSX로 변수 선언

const element = <h1>I'm considering dropping this class</h1>;

 

 

3. JSX에서 JS 표현식 사용하기

• JSX의 중괄호 내부에는 JS에서 작성 가능한 모든 표현식 작성 가능
• 컴파일이 끝나면 JSX 표현식이 JS 객체로 인식됨
• 따라서 JSX를 if문이나 for 반복문 안에서 사용, 변수로 할당, 인자로 사용, 함수로부터 반환 등이 가능

 

3-1. 예제 코드 작성 - how라는 변수를 선언한 후 중괄호로 감싸서 JSX 안에서 사용

//example.js

const how = 'seriously,'
const element = <h1> {how} I'm cosidering dropping this class </h1>;

ReactDOM.render(
    element,
    document.querySelector('#root')
);

 

3-2. 라이브 서버로 결과 확인

<참고>
가독성을 좋게 하기 위해 JSX를 여러 줄로 나눠서 작성할 경우,
자동 세미콜론 삽입을 피하기 위해서는 괄호로 묶는 것을 추천!

 

4. JSX 속성 정의

4-1. double quote를 이용해서 속성에 문자열 리터럴 정의 가능

const element = <a href="https://www.google.com/"> google </a>;

 

4-2(1) 중괄호 사용해서 속성에 JS 표현식 삽입 가능

• 속성에 JS 표현식을 삽입할 때는 중괄호 주변에 double quote 입력 금지
• double quote(문자열 값에 사용) 또는 curly bracket(표현식에 사용) 둘 중 하나만 사용할 것
• 동일한 속성에 두 가지 동시 사용 금지

const user = {
        name: "conan o'brien",
        dob: '1963-04-18',
        imgUrl: 'https://images.indianexpress.com/2021/06/Conan-OBrien-1200.jpg'
    }

    const element = <img src = { user.imgUrl }> </img>;

 

4-2(2) 라이브 서버로 결과 확인

<주의>
React DOM은 속성 작성 시,
HTML 속성명 대신 camelCase 명명 규칙을 따름
ex) JSX에서 class(x) className(o)

 

5. JSX로 자식 정의하기

• JSX 태그는 자식을 포함할 수 있다.
• 단, 자식 없이 빈 태그라면 XML처럼 />를 이용해 닫아주어야 한다.

5-1. 자식이 있는 경우

const element = (
	<div>
    	<h1> Seriously, <h1>
        <h2> I'm cosidering dropping this class. </h2>
    </div>
);

 

5-2. 자식이 없는 경우

const element = <img src = { user.imgUrl } />;

 

6. JSX로 React 엘리먼트(객체) 생성

Babel은 JSX를 React.createElement() 호출로 컴파일한다.

따라서 JSX 사용시 React.createElement()를 직접 호출하는 일은 거의 없다.

 

 

 

그래도, 알아는 둬야 하니까 메서드 호출로 React 엘리먼트를 한번 생성해보자.

 

 

 

React.createElement()를 통해서는

1. 버그가 없는 코드를 작성하기 위한 몇 가지 검사를 수행
2. 다음과 같은 React 엘리먼트 생성 > React는 해당 객체를 읽어서 DOM 구성 및 최신 상태로 유지 할 수 있다.

 

6-1. 문법

React.createElement(
	type,
    [props],
    [...children]
)

• 인자로 주어지는 타입에 따라 새로운 리엑트 엘리먼트를 생성하여 반환
• 첫번째 인자값인 type으로는 태그 이름 문자열 / React 컴포넌트 / React Fragment 중 하나가 올 수 있다.

 

 

6-2. 예시

const element = React.createElement(
	'h1',
	{className: 'greeting'},
    'hello, world!'
);

const element = {
	type: 'h1',
	props: {
    className: 'greeting',
    children: 'hello, world!'
    }
};

 

 

7. JSX에서 주석 달기

<script type = "text/babel">
    <div>
        { /*
            주석은 여기에! 한줄 또는 여러줄로 작성 가능
        */}
    </div>
</script>

 

 

 

 

 

 

---

 

 

class App extends React.Component{
    render(){   //render 함수 선언
        return(
            <button>클래스 컴포넌트 버튼</button>
        )
    }
}

        const root = document.querySelector('#root')
ReactDOM.render(<App/>, root)

 

render 함수는 화면에 최종적으로 그릴 내용을 넣는 공간