[React] jsx / Props / state

 

 

1. jsx (A syntax extension to javascript)

jsx는 리액트를 사용할 때 필수적으로 사용해야하는 문법이다. javascripts xml로 자바스크립트에 xml을 확장한 문법이다. 즉, 자바스크립트 + xml/html인 것이다.  예를 들면 이런식으로 사용할 수 있는 것이다.

const element = <h1>Hello react</h1>;

 

리액트에서 js에 html 태그를 작성할 수 있었던 이유는 jsx 문법을 사용하기 때문이다. 사실 리액트의 정식 명칭도 리액트.js라는 것! (ㄴ 0 ㄱ)

 

function ChildComponent(props){
  const {name, age} = props;
  return <div>
        <p>이름은 {name} 이며, {age}살 입니다.</p>
    </div>
}

export default ChildComponent;

이런식으로 {}를 이용해 name과 age를 보여주는데, 이것 또한 jsx문법이 사용되었다고 보면 된다.

jsx는 xml, html 코드를 자바스크립트로 변환하는 과정을 거치게 된다.

React.createElement가 jsx 코드를 자바스크립트 코드로 변환하는 과정을 거치게 한다.

즉 순서가 jsx > xml, html > 자바스크립트이다 (뇌피셜)

 

참고로 파라미터로 type(div/span과 같은 html 혹은 다른 리액트 컴포넌트), 프롭스, children이 들어간다.

 

즉, jsx를 사용한 코드는 자동으로 React.createElement가 입혀진 것처럼 xml, html코드를 자바스크립트로 만든다.

하지만 jsx를 사용하지 않은 코드(순수한 자바스크립트)는 React.createElement를 씌워야 한다. (여기 잘 이해 안감)

왜냐하면 자바스크립트 객체를 만들기 위함이다. 아래를 보자.

 

리액트는 항상 자바스크립트 객체를 읽어서 돔을 만드는 데 사용하고 항상 최신상태를 유지한다.

리액트는 이 객체를 엘리먼트라고 부른다. (React.createElement를 통해 만들었으니까 엘리먼트 ^^)

 

이처럼 리액트는 jsx를 createElement가 들어간 상태로 변환한다.

그렇기에 리액트에서 jsx코드를 사용하는 것은 필수가 아니다. 왜냐하면 모든 코드를 createElement를 사용해 개발하면 되기 때문이다.

다만 jsx를 사용했을 때 코드가 간결해지고, 생산성과 가독성이 올라가기 때문에 사용을 권장한다.

 

또한 jsx문법은 잠재적인 보안 위협을 방어할 수 있다. 리액트는 괄호 {}를 이용해 title이라는 변수를 쓴다.

기본적으로 리액트 돔은 렌더링하기 전에 임베딩된 값을 모두 문자열로 변환한다. 그렇기 때문에 명시적으로 선언되지 않은 값은 {}괄호 사이에 들어갈 수 없다. 이것은 결과적으로 XSS공격을 방어할 수 있다.

 

참고로 {} 중괄호에는 자바스크립트 코드가 들어간다.

 

다음은 자식을 정의하는 방법이다. 최상위 태그 아래 요소는 모두 자식이다.

 

JSX 소개 – React

 

 

2. Props

부모컴포넌트에서 관리하는 데이터를 자식 컴포넌트에게 전달해줘야 할 때 사용된다.

위 코드에서 props가 사용되었는데, 부모 컴포넌트 App에서 name과 age를 전달한다.

그럼 자식은 props를 통해 데이터를 받아 화면에 나타낼 수 있는 것이다.

import logo from './logo.svg';
import './App.css';
import ChildComponent from './child.js';

function App() {
  return (
    <div>
      <h1>안녕하세요!</h1>
      <ChildComponent name="산하" age={26} /> {/* props */}
    </div>
  );
}

export default App;

 

 

3. State

리액트에서 컴포넌트는 return을 통해 UI 요소를 보여준다. 하지만 시간을 보여주는 화면을 구현하거나, 네트워크 통신을 통해 데이터를 받아오는 화면을 구현하거나 혹은 검색창에서 검색어를 입력하고 아래 추천 검색어를 바꿔 보여주는 화면을 구현할 때 등 컴포넌트를 업데이트(렌더링)해줄 수 있도록 해주는 장치가 state이다.

 

Props는 부모 컴포넌트에게 값을 전달받아 정적인 데이터로만 내용을 꾸린다.

반면 State는 컴포넌트 내부에서 변형되는 값으로 꾸립니다. 즉 동적인 데이터를 사용한다.

import React from 'react';


function TimerComponet(){
	const [time, setTime] = React.useState(0) {/* state */}
	console.log('Component 업데이트!');
    
	function updateTime(){
		setTime(time+1);
  }
  
  return  (
		<div>
			<h3>{time}초</h3>
			<button onClick={updateTime}>증가</button> 
   		</div>
	)
}


export default TimerComponet;

버튼을 누르면 네트워크 요청(비동기)을 해서 결과를 받아와 새롭게 렌더링한다.

 

const [time, setTime] = React.useState(0)

이렇게 표현하는 방식을 destructuring이라고 한다. ES6 문법이다.

 

 

 

 

출처 : https://www.inflearn.com/course/%EC%98%AC%EC%9D%B8%EC%9B%90-%EA%B0%9C%EB%B0%9C%ED%81%B4%EB%9E%98%EC%8A%A4

비전공자를 위한 진짜 입문 올인원 개발 부트캠프 - 인프런 | 강의