JSX 살펴보기

JSX(JavaScript XML)

• jsx는 자바스크립트와 xml/html을 합친 개념으로 리액트에서 엘리먼트를 생성하기 위한 코드 형식이라고 볼 수 있다.

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

• 위의 element 변수의 값은 h1태그로 감싼 “Hello, world!”라는 문자열로 초기화된다.
• 위 예시에서는 문자열로 나타내었지만 문자열 뿐 아니라 자바스크립트문으로 변환하게 되어 특정 기능을 수행게 한다.

JSX의 역할과 필요성

• 기본적으로 JSX는 XML, HTML코드를 자바스크립트 코드로 변환한다는 점에서 의미가 있다.

class Hello extends React.Component{
    render(){
        return <div>Hello {this.props.toWhat}</div<>
    }
}
ReactDOM.render(
    <Hello toWhat = "World" />.
    document.getElementById('root')
)

• Hello 클래스에 toWhat이라는 prop값을 주고 이를 통해 Hello의 Element(자바에서의 객체 개념)을 만들어 내고 있다.
• 이 객체를 리액트의 render()를 통해 브라우저에 랜더링하는 과정을 보여준다.

JSX없이 렌더링하기

class Hello  extends React.Component{
    render(){
        return React.createElement('div',null, `Hello ${this.props.toWhat}`);
    }
}
ReactDOM.render(
    React.createElement('Hello',{ toWhat: 'world'}, null),
    document.getElementById('root')
)

• 이 코드는 JSX가 없이 순수 자바스크립트로만 작성한 코드로 이전 예시와 동일하게 작동한다.
• 즉 JSX를 통해 우리는 리액트의 createElement()를 실행한다는 것을 알 수 있다.
• 그 결과 자바스크립트 객체(Element)를 얻게 되는 것이다.

createElement()

• 이 메서드의 파라미터로는
• type, [props],[…children] 3가지가 온다.
• type은 element의 유형을 의미한다. html태그가 올 수도 있고 컴포넌트가 올 수도 있다.
• props 컨포넌트의 속성을 의미한다.
• children은 현재 creatElement로 생성되는 element의 자식 element를 의미한다.

JSX의 장점

1. 코드가 간결해진다.
   • JSX를 사용하지 않을 때보다 코드가 간결해진다.
2. 가독성의 향상
   • 코드가 간결해지기에 가독성이 높아지고 특히 버그 발견에 용이하다.
3. Injection Attacks 방어에 용이
   • 입력창에 소스코드를 입력해 악의적 코드가 실행되도록하는 해킹 방법
   • 리액트 돔은 임베드(사용자가 입력한) 된 값을 모두 문자열로 변환(소스코드가 문자화 됨)
   • XSS(크로스 사이트 스크립트)를 방지 가능

JSX의 사용법

• 자바스크립트코드와 xml, html코드를 혼합해 사용가능
• html 태그에서 {}중괄호 안에 자바스크립트 코드를 넣는다.

const name = '소플';
const element =<h1>안녕, {name}</h1>;

ReactDOM.render(
    element,
    document.getElementById('root')
)

• name이라는 변수를 사용하기 위해 {name}으로 표기함.

태그 속성에 값 넣기

//큰 따옴표 사이에 문자열을 넣기
const element =  <div tavIndex="0"></div>;
//중괄호 사이에 자바스크립트 코드 넣기
const element = <img src={user.avatarUrl}></img>

자식 정의하기

const element =  {
    <div>
        <h1>안녕하세요</h1>
        <h2>열심히 리액트를 공부해 봅시다!</h2>
    </div>
}

• 자식을 정의하는 방법은 상위 태그로 하위 태그를 둘러쌓으면 부모-자식관계가 형성된다.
• JSX가 알아서 이를 수행한다.

JSX 출력하기

• JSX를 출력하기 위해서는 ReactDOM.render(element, container[, callback])메서드를 사용해야 한다.
• 이 메서드는 컴포넌트를 페이지에 렌더링하는 기능을 수행한다.
• element : JSX로 작성한 화면에 출력할 내용
• container : 첫 번째 인자인 JSX를 랜더링 해서 보여줄 DOM 안의 위치

참고자료

• https://velog.io/@gyumin_2/React-JSX%EB%9E%80%EC%A0%95%EC%9D%98-%EC%9E%A5%EC%A0%90-%EB%AC%B8%EB%B2%95-%ED%8A%B9%EC%A7%95-%EB%93%B1
• 처음 만난 리액트(React), 인프런