[react] 리액트 코드 짤 때 참고할 문법

1. html을 담은 retun 안에는 하나의 태그로 묶여야 한다. 

return(
    <div>
        ~~~
    </div>
)

보통 태그를 감쌀 땐 div를 쓴다.

 

그런데 두개를 나란히 두고 싶다면?

하나의 의미 없는 div안에 두개를 넣으면 되는데, 의미 없는 div 대신 빈 태그로 감쌀 수 있다.

return(
    <>
        <div></div>
        <div></div>
    </>
)

 

 

2. 컴포넌트를 생성하는 문법

function Modal(){
    return(
        <div className='modal'>
            <h4>제목</h4>
            <p>날짜</p>
            <p>상세내용</p>
        </div>
    )
}

기본적으로 알고있는 함수 문법이다. 

그런데 이 방법 말고, 변수를 선언하고 그 안에 화살표함수를 담아 사용하기도 가능하다

const Modal = () => {
    return(
        <div className='modal'>
            <h4>제목</h4>
            <p>날짜</p>
            <p>상세내용</p>
        </div>
    )
}

const로 선언한 이유는 코드 작성 중에 Modal = 123 등으로 재선언을 하면 에러 메세지를 출력해준다.

그러면 변수명이 겹쳐서 일어날 수 있는 불상사를 막아줄 수 있다.

 

 

3. 컴포넌트를 호출할 때, 여는 태그와 닫는 태그가 기본이다.

<Component></Component>

그런데 더 축약해서 사용할 수 있는 방법이 있다!

<Component />

하나의 태그에서 열고 바로 닫아버리는 문법~