[React] JSX, props

JSX

React에서 UI를 구성하기 위해 사용하는 문법으로 자바스크립트 코드 내에서 HTML과 유사한 구문을 사용할 수있도록 한다.

이것이 가능한 이유는 브라우저에서 jsx 코드를 바벨을 사용해서 자바스크립트 형태의 코드로 변환해주기 때문이다.

function Test() {
    return (
        <div>
            <h1>hello!</h1>
        </div>
    );
};

export default Test;

• JSX는 HTML과 비슷한 구조를 가지고 있어 코드가 직관적이고 가독성이 좋음.
• JavaScript의 모든 기능을 사용할 수 있어 동적 UI 쉽게 구현 가능
• 컴포넌트를 쉽게 정의하고 재사용할 수 있음.

 

특징

1. JSX에서 {}를 사용하여 자바스크립트 표현식 사용 가능

• 자바스크립트 표현식 → 삼항 연산자나, 변수의 이름처럼 특정 값으로 평가될 수 있는 코드
• 즉 if, for문은 사용 불가

2. React UI는 문자열, 숫자, React 컴포넌트, 또는 배열과 같은 특정 데이터 타입 요소만 렌더링 가능

• boolean, undefined, null, 객체는 렌더링이 안됨

3. 명시적으로 닫는 태그가 존재해야함

4. 컴포넌트가 하나의 상위 수준 요소만 반환함

• 프래그먼트 구문 <></> : 렌더링될 때 불필요한 DOM 요소를 생성하지 않음

---

Props

Props는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용된다.

• 컴포넌트 : html 태그를 반환하는 함수로 컴포넌트를 부를 때는 함수의 이름을 따서 부른다
  • 클래스로도 컴포넌트를 만들 수 있지만 일반적으로 함수로 만들며 함수명은 대문자, 단수이다.
    
    • 자식 컴포넌트 : 다른 컴포넌트의 리턴문 내부에 포함되는 컴포넌트

const ParentComponent = () => {
    return <ChildComponent name="hbb" age={20} />;
};

const ChildComponent = (props) => {
    return (
        <div>
            <h1>Name: {props.name}</h1>
            <p>Age: {props.age}</p>
        </div>
    );
};

const ChildComponent = ({ name, age }) => {
    return (
        <div>
            <h1>Name: {name}</h1>
            <p>Age: {age}</p>
        </div>
    );
};

 

부모 → 자식으로 전달될 수 있으며 자식 컴포넌트에서 전달받은 props는 읽기 전용이다.

부모 컴포넌트에서 props를 변경하면, 해당 props를 사용하고 있는 자식 컴포넌트는 리렌더링된다.