원티드 프리온보딩 일정을 기다리며 리액트와 자바스크립트를 되돌아본다. 왜??
인간은 망각의 동물이니까!!
⭐️ 리엑트에서 JSX 문법이 어떻게 사용되나?
⛳️ JSX란?
- 자바스크립트의 확장 문법
- 브라우저에서 실행하기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 자바스크립트 형태의 코드로 변환됨.
- JSX는 자바스크립트의 공식적인 문법이 아님.
- 자바스크립트에서 HTML을 작성하듯이 비슷하게 작성할 수 있도록 해주는 것이 JSX의 가장 큰 장점이자 이유.
JSX 문법의 특징
- 컴포넌트에 두개 이상의 요소가 있다면 부모 요소 하나가 감싸야함
function App(){
return(
<div>
<h1>테스트1</h1>
<h2>테스트2</h2>
</div>
)
}감싸는 이유는 ?
리액트가 사용하는 Virtual DOM(가상돔) 방식에서는 컴포넌트 변화를 감지할 때 효율적으로 비교하고자 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙!
JSX안에서 자바스크립트 값을 사용할때
name의 값을 {name}과 같이 넣어서 렌더링 할 수 있다.
import Reactfrom 'react';
function App() {
const name= '리액트';
return (
<>
<h1>{name}</h1>
<h2>test</h2>
</>
);
}
exportdefault App;
- JSX 내부에서 if문은 사용 불가능, 필요시엔 삼항 연산자를 사용.
⭐️ props와 state의 차이
⛳️ state
state는 컴포넌트 상태를 나타내며, props와 반대로 변할수 있다. 컴포넌트의 내부에서 선언되기 때문에 이러한 state는 외부에 공개하지 않고 컴포넌트가 스스로 관리한다.! state로 사용하는 것은 컴포넌트의 상태값을 나타내기 위한 것들이 될 것이다. ex) (리스트에서 선택된값 또는 체크박스에서 체크된값 등)
- 상태에 따라 변화하는것
- 직접 변경가능
- 내부에서 생성하고 활동, 데이터를 변경할 수 있다.
⛳️ props
먼저 props('properties'의 줄임말)로 state 와의 간단한 차이는 변할수 없다는 것. 컴포넌트는 상속하는 부모 컴포넌트로 부터 props를 받고 이 props는 상속받는 컴포넌트 내에서 수정이 불가능하다. 리엑트에서 부모> 자식 일방향성 상속이라는 특징때문이다.
- 읽기전용
- 설정은 부모요소에서
- 외부(부모 컴포넌트)에서 상속받는 데이터이며 데이터 변경이 불가능하다.
