[React] JSX와 컴포넌트

React – A JavaScript library for building user interfaces

 

 

 

 JSX 

 

 

▶  JSX 란?

 

:  JSX는 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 JavaScript의 확장.

 

 

-  HTML과 비슷하게 생겼으나 JavaScript이 고 HTML과 다른 부분이 있다.

const App = () => {
    return (
        <div>
            <p>안녕</p>
            <MyComponent>반가워</MyComponent>
            <div>잘가</div>
        </div>
    );
}

 

 

 

-  JSX는 Babel에 의해서 Transcompile 된다.  ( JSX  →  JavaScript로 )

 

이미지출처 : 엘리스 React 기초 Ⅰ - 04 JSX와 컴포넌트 강의자료

 

 

 

 

▶  JSX의 장점

 

1)  개발자 편의성 향상

2)  협업에 용이 / 생산성 향상

3)  문법 오류와 코드량 감소

 

 

 

 

 

▶  JSX의 특징  /  HTML과 차이점

 

1)  HTML 태그 내에 JavaScript 연산 가능

const App = () => {
    const a = 3;
    const b = 6;
    return <div>{a} + {b} = {a+b}</div>
}

 

 

 

2)  class  →  className

(
    <div className="greeting" style={{ padding: 10, color: 'red' }}>
        {name}님 안녕하세요. <br />
        반갑습니다.
    </div>
)

 

 

 

3)  스타일은 object로 작성

(
    <div className="greeting" style={{ padding: 10, color: 'red' }}>
        {name}님 안녕하세요. <br />
        반갑습니다.
    </div>
)

 

* 주의사항

위와 같은 Inline style의 Property name은 camelCase로 적는다.

ex)  font-size  →  fontSize   /   padding-left  →  paddingLeft

 

[참고]  W3C School - React CSS

React CSS

 

 

 

4)  닫는 태그 필수

 

기존 HTML에서는 닫는 태그를 작성하지 않아도 에러가 발생하지 않으며 <input>, <br>같은 일부 태그의 경우 아예 닫는 태그를 생략하여 코드를 작성해도 되었으나 JSX에서는 닫는 태그를 필수로 작성하여야 한다.

<div>
   <input type="text" />
   <br />
</div>

 

 

 

5)  최상단 element는 반드시 하나

 

JSX의 원칙상 최상단 Element는 한 개만 작성이 가능하기 때문에 이를 <div> 또는 <React.Fragment>를 이용해 감싼다.

 

-  실제 렌더링 시에는 Fragment 안에 있는 내용만 출력된다.

-  <React.Fragment> 는 간단히 <> 로 표기가 가능하다.

const App = () => {
    return (
        <div>Hello</div>    // 에러발생
        <dov>World</div>		
    )						
}


const App = () => {
    return (
        <>  {/* React.Fragment */}
            <div>Hello</div>
            <dov>World</div>
        </>
    )						
}

 

 

 

 

 

 

 

 Component (컴포넌트) 

 

 

▶  Component 란?

 

React에서 페이지를 구성하는 최소단위

 

-  Component의 이름은 대문자로 시작

-  Class Component  /  Function Component

-  Controlled Component  /  Uncontrolled Component

 

 

Component를 만들고 다른 Component에서 자유롭게 활용할 수 있다.

const MyComponent = ({children}) => {
    return <div style={{
        padding: 20,
        color: 'blue'
    }}>
        {children}
    </div>;
}


const App = () => {
    return (
        <div>
            <p>안녕</p>
            <MyComponent>반가워</MyComponent>
            <div>잘가</div>
        </div>
    );
}

 

 

 

초기 React의 Component는 모두 Class Component였다.

이후 v16부터 새로운 Function Component와 Hooks 개념이 발표되었으며 현재는 Function Component가 주로 사용되고 있다.

// Class Component
class Hello extends Component {
    reder() {
        const { name } = this.props;
        return <div>{name}님 안녕하세요</div>
    }
}


// Function Component
const Hello = (props) => {
    const { name } = props;
    return <div>{name}님 안녕하세요</div>
}

 

 

 

컴포넌트에 Attribute에 해당하는 부분을 Props(Properties)라고 한다.

컴포넌트 안에 작성된 하위 Element를 children이라고 한다. (children도 props 중 하나)

<MyComponent user={{name: "민수"}} color="blue">
    <div>안녕하세요</div>    // children
</MyComponent>

 

 

 

상위 Element로부터 전달받은 props를 활용할 수 있다.

이 컴포넌트의 자식(children) 요소 역시 props로부터 값을 받아올 수 있다.

const MyComponent = (props) => {
    const { user, color, children } = props;
   
    return (
        <div style={{ color }}>
            <p>{user.name}님의 하위 element는 !</p>
            {children}
        </div>
    )
}

 

-  컴포넌트끼리 데이터를 주고받을 땐 Props

-  컴포넌트 내에서 데이터를 관리할 땐 State

-  데이터는 부모  →  자식으로만 전달 가능

 

 

 

 

 

 

---

 이 글은 엘리스의 AI트랙 5기 강의를 들으며 정리한 내용입니다.