React 기본 지식

1. JSX

(Javascript Syntax eXtension)

자바스크립트를 확장한 문법이다.

React에서는 HTML을 사용하지 않고, JSX라는 HTML 비슷한 것을 이용한다.

에디터를 이용해서 코딩을 하기 때문에 HTML에 맞춰 자동완성 같은 것들은 전부 똑같이 지원해준다.

그냥 지금은 간단하게 리액트용 HTML이라고 생각하자.

HTML과 자바스크립트와의 차이점을 하나하나 살펴보며 알아가보자

2. class 속성

HTML은 class 속성을 입력할 때 class="속성명" 의 방식으로 입력한다.

하지만 자바스크립트에서는 class 키워드가 존재하기 때문에 className을 사용해야 한다.

에디터의 자동완성도 className으로 자동으로 해주기 때문에 특별히 신경쓸 것은 없다.

3. 데이터 바인딩

기존 js 방식

document.getElementById().innerHTML = '';

특정 영역에 데이터를 바꾸기 위해 위와 같은 코드를 입력해야 한다.

하지만 아래 코드를 보자

<어떤 태그>{어떤 변수 or 어떤 함수}</어떤 태그>

리액트에서는 위와 같은 코드의 형태를 지원한다.

실제 예시를 보자

let temp = '학습 목록';

return (
  <div className="App">
    <div className="skyblue">
      <div>공부 Blog</div>
    </div>
      <h4>{temp}</h4>
  </div>
);

이렇게가 가능하다.

또한 src, id, href, className 등의 속성에도 {변수명, 함수 등}이 가능하다.

주의점은 style 속성은 조금 다르다.

자바스크립트에서 사용되는 키워드들이 많기 때문에 항상 오브젝트 형식으로 사용해야 한다.

<div style={ { color : 'blue', fontSize : '30px'} }>공부 Blog</div>

물론 이 오브젝트를 변수로 선언하고, 해당 변수를 이용하는 것 또한 지원한다.

다만, 대시 기호(-)는 자바스크립트에서 뺄셈 연산자이므로,

속성명을 적을땐 fontSize같이 카멜 케이스 방식을 이용한다.

728x90