컴포넌트

컴포넌트란 UI를 재상용이 가능하도록 여러 조각으로 나눈 것 이다. 마치 자바스크립트에서의 함수와 비슷하다.

함수형 컴포넌트에서 입력되는 값을 props라 하고
반환되는 것은 element라 한다.

const User = ({ user, deleteUserHandler }) => {
    const squareStyle = {
        width: "100px",
        height: "100px",
        border: "3px solid green",
        borderRadius: "10%",
        display: "flex",
        flexFlow: "column nowrap",
        justifyContent: "center",
        alignItems: "center",
    };

    const { age, name, id } = user;

    return (
        <div style={squareStyle}>
            <div>
                {age}살 - {name}
            </div>
            <div>
                <Button color="red" onClick={() => deleteUserHandler(id)}>
                    삭제
                </Button>
            </div>
        </div>
    );
};

컴포넌트 구성 요소

• import 영역
• export 영역
• 자바스크립트 영역
• return 이후 리액트 영역

컴포넌트의 부모 자식 관계

각각의 컴포넌트는 종속성을 가지고 부모 자식 관계를 가질 수 있다.

JSX

자바스크립트를 확장한 문법
리액트 element를 생성하기 위한 문법

const Start = <div>
	<h1>안녕하세요<h1/>
	<div/>;

이렇게 변수 안에 html요소처럼 보이는 것(가상DOM)을 사용하는 문법

브라우저는 JSX 파일을 직접 해석할 수 없어 'babel'이라는 도구를 이용해 js로 변환한 후 해석한다.

JSX 규칙⭐

1. 닫는 태그 </> 필수!!!

import React from "react";

const App = () => {
    return (
        <div>
            <input type="text">
        </div>
    );
};


export default App;
에러 발생! 닫는 태크 </>가 없기 때문

2. jsx식에는 부모요소가 하나 있어야한다.

import React from "react";

const App = () => {
    return (
            <div>123</div>
            <div>456</div>
    );
};

export default App;
에러 발생! 부모요소가 2개 있기 떄문

3. class 대신 className을 지정한다.

4. id는 그대로 id를 사용한다.

5. 스타일링을 할때 인라인에서 객체 형태로 한다.

import React from "react";

const App = () => {
    const Number = 1000;
    return (
        <div>
            <p
                style={{
                    color: "orange",
                }}
            >
                첫 번쨰 줄
            </p>
        </div>
    );
};

export default App;

하루를 마치며

오늘은 리액트 강의를 다듣고 개인과제를 시작하는 날이다. 강의를 한 번만보고 한다는 것은 상당히 어려운일이다. 그래서 내일은 오전에 강의에서 중요한 부분만 다시 본 뒤 과제를 할 것이다. 오후에는 최대한 쥐어짜서 CRUD를 완성할 것이다.