2024.05.13

컴포넌트 Component

• UI를 재사용 가능한 개별적인 조각으로 나눈것

함수형 & 클래스형 컴포넌트

// 함수형 컴포넌트
function Welcom(props){
	return <h1>Hello,{props.name}</h1>
}

// 클래스형 컴포넌트
class Welcom extends React.Component{
	render(){
    	return <h1>Hello,{this.props.name}</h1>
    }
}

• 두 가지 모두 기능상으로 동일하지만 공식 홈페이지에서는 함수형 컴포넌트 사용을 권장한다

❗️ 컴포넌트 생성 시 주의 할 점

• 컴포넌트의 첫 글자는 대문자
• 폴더는 소문자로 시작하는 카멜 케이스
• 컴포넌트를 만들 파일은 대문자로 시작하는 카멜 케이스

부모 - 자식 컴포넌트

부모 컴포넌트에 자식 컴포넌트를 넣어주면 된다

function App() {
	return <TopComponent />
}
function MidComponent(){
	return <BotComponent />
}
function BotComponent(){
	return <p>자식 컴포넌트</p>
}

JSX

JS를 확장한 문법으로 HTML를 품고 있는 JS이다

JSX 문법

• return 이하에는 반드시 1개의 부모태그만 있어야 한다.
  같은 선상의 태그가 2개 있으면 안됨

// 올바른 예시
const App = () => {
	return (
    	<div>
        	<div>첫 번째 줄</div>
        	<div>두 번째 줄</div>
        </div>
    )
}

// 잘못된 예시
const App = () => {
	return (
        <div>첫 번째 줄</div>
        <div>두 번째 줄</div>
    )
}

❗️ 만약 div태그가 필요 없는데 규칙을 지켜야 할 경우

const App = () => {
	return (
    	<>
        	<div>첫 번째 줄</div>
        	<div>두 번째 줄</div>
        </>
    )
}

JS 변수 & 함수를 사용하는 경우

const App = () => {
	const Number = 1000;
	return (
    	<>
        	<div>첫 번째 줄</div>
        	<div>{Number}</div>
        </>
    )
}

const App = () => {
	const arr = [1,2,3,4,5];
	return (
    	<>
        	<div>첫 번째 줄</div>
        	<div>{arr.map(() => {})}</div>
        </>
    )
}

{ }를 사용하여 변수나 함수를 사용 할 수 있다

ID & Class를 지정하는 경우

const App = () => {
	return (
    	<div id="abc" className="def">React</div>
    )
}

id는 HTML의 방식과 동일하지만 class는 className=""으로 지정해야 한다

Style 요소를 주는 경우

const App = () => {
	return (
    	<div style={ {color : 'blue', fontSize : '30px'} }>
        	React
        </div>
    )
}

const App = () => {
	const DivStyle = {color : 'blue', fontSize : '30px'}
	return (
    	<div style={DivStyle}>
        	React
        </div>
    )
}

두 가지 방법으로 스타일을 줄 수 있다
❗️ style={ { } } 중괄호를 두번 사용하는 이유는 객체 요소가 들어오기 때문이다

Props

컴포넌트 간의 정보교환 방법이다

• 부모 컴포넌트가 자식 컴포넌트에 물려준 데이터

❗️props는 반드시 위에서 아래 방향으로 흐른다 (부모 -> 자식 방향)
❗️props는 반드시 읽기 전용으로 취급한다

Props 예시

function App() {
	return <TopComponent />
}
function MidComponent(){
	const lastName = '홍'
	return <BotComponent lastName={lastName} />
}
function BotComponent(props){
	const name = '길동'
	return <p>{`이름은 ${props.lastName}${name}입니다`}</p>   // 이름은 홍길동입니다
}

• 부모 컴포넌트는 내려줄 데이터를 자식 컴포넌트에 명시한다(lastName={lastName})
• 자식 컴포넌트는 매개변수(props)로 부모 컴포넌트에서 내려준 lastName을 받는다

props drilling

• 부모의 데이터를 자식에게 계속 내려주는것

function App() {
	return <TopComponent />
}
function MidComponent(){
	const name = '홍길동'
	return <BotComponent1 name={name} />
}
function BotComponent1(p) {
	return <BotComponent2 name={p.name}/>
}
function BotComponent2(props) {
	return <p>{`이름은 ${props.name}입니다`}</p>   // 이름은 홍길동입니다
}

• MidComponent에서 BotComponent1로 name을 내려준다
• BotComponent1에서 name을 받고 다시 BotComponent2로 내려준다

Children

props의 다른 방식으로 주로 레이아웃 컴포넌트를 만들때 사용한다

• 부모 태그에서 자식 태그를 열고 닫아 자식에게 줄 수 있다
  이때, children이라는 속성으로 들어가게 된다

const App = () => {
	return <User>안녕하세요 !</User>
}
const User = (props) => {
	return <p>홍길동님 {props.children}</p>  // 홍길동님 안녕하세요 !
}

props 추출 (구조분해할당)

function App(){
	return (
    	<Layout>
        	<div> 컨텐츠 영역 입니다 </div>
        </Layout>
    )
}
function Layout(props){
	const children = props.children
    return (
    	<main>
        	<header>헤더 영역 입니다</header>    // 헤더 영역 입니다
            {children}						 // 컨텐츠 영역 입니다
            <footer>푸터 영역 입니다</footer>    // 푸터 영역 입니다
        </main>
    )
}