[React 공식문서 study] #0. react 개요

Creating and nesting componets

컴포넌트 생성 및 중첩하기

react 앱은 컴포넌트로 만들어진다.
컴포넌트는 고유한 로직과 모양을 가지 UI(사용자 인터페이스) 이 일부이다.

react components 는 마크업을 반환하는 javascript 함수이다.

function MyButton() {
    return (
        <button>btn</button>
    )
}

export default function MyApp() {
    return (
        <div>
            <h1>Welcome!</h1>
            <MyButton />  🔥
        </div>

    )
}

다른 컴포넌트에 MyButton 을 중첩할 수 있다.

⚡️ 리액트 컴포넌트 이름은 항상 대문자로 시작해야 한다
⚡️ HTML 태그는 소문자로 시작

Writing markup with JSX

jsx로 마크업 작성하기

리액트 프로젝트는 편의성을 위해 JSX 를 사용

JSX은 HTML 보다 더 엄격하다.

과 같은 태그를 닫아야 한다. 또한 컴포넌트는 여러 개의 JSX 태그를 반환 할 수 없으므로

...

, <>...</> 래퍼와 같이 하나의 공유 부모로 감싸야 한다.

functio AboutPage () {
    return (
        <>
            <h1>welcome</h1>
        </>
    )
}

Addinng styles

스타일 추가하기

리액트에서는 className 으로 CSS 클래스를 지정
HTML class 어트리뷰트와 같은 방식으로 작동

<img className="avatar" />

//별도의 CSS 파일에 작성

.avatar {
    border-radius: 50%
}

Displaying data

데이터 표시하기

JSX 를 사용하면 javascript에 마크업을 넣을 수 있다.
중괄호를 사용하면 코드에서 일부 변수를 삽입하여 사용자에게 표시할 수 있도록 javascript 로 '이스케이프' 할 수 있다

return (
    <h1>
        {user.name}
    </h1>
)