리액트 기초 1탄 Props 전달 방법, JSX 규칙

리액트 기초 1탄

1. JSX
2. Props

JSX

JSX는 리액트에 View를 작성할 때 사용하는 문법이다. 생김새는 HTML과 동일하게 생긴 것 같지만, 엄밀히 말하자면 JS라고 할 수 있다.
우리는 이 JSX를 JS로 제대로 변환되어 사용하기 위해서는 몇 가지 규칙이 있다.

1. 태그는 꼭 닫혀야 한다.

HTML에서도 당연해 보이지만, 또 당연하지 않다.

<input type="text" > 
<img src="..." alt " ..."  >

위 두 코드는 html로 작성한다면 오류가 없지만, JSX에서는 오류가 발생한다. 이유는 태그가 닫혀있지 않기 때문이다.
보통 div, h1, li 등 영역을 지정하는 태그에 경우 습관적으로 태그를 닫지만, input, img태그에 경우 html에서는 태그를 닫지 않아도 정상 동작한다.
하지만 JSX에서는 꼭 태그를 닫아야 오류가 발생하지 않는데 태그를 닫는 방법은 다음 2가지 방법이 있다.

<p> hello world </p> {/* 여는 태그와 닫는 태그 */}
<img src="..." alt " ..."  / > {/* 태그 마지막에 '/'를 작성하여 닫기 */}

태그 사이에 내용이 없다면 Self Closing 태그를(2째 줄) 사용하여 닫는다.

2. 하나의 태그로 감싸져야 한다.

return (
<input type="text" > 
<img src="..." alt " ..."  >
)

위 코드는 오류가 발생한다. 이유는 태그가 하나의 감싸져 있지 않기 때문이다. 즉, 형제 태그들 끼리 작성할 수 없고, 우리는 공통된 부모 요소를 작성해야한다.

return (
<>
    <input type="text" > 
    <img src="..." alt " ..."  >
</>
)

이렇게 리액트의 Fragment 를 사용하면 된다. 물론 div태그로 묶는 것도 가능하다. 하지만 div태그로 묶을 경우 스타일 설정에서 꼬일 수 있고, 불 필요한 div 태그가 하나 더 늘어나는 상황이 있을 수도 있다. 상황에 맞게 사용하면 된다.

3. JSX안에 JS코드는 {} 괄호를 열어 사용하자.

나는 HTML로 작성하다 리액트 JSX를 작성할 때 편하고 좋은 무기는 JS코드를 사용할 수 있다는 점이다.( 물론 JS에서도 가능하게 하는 방법은 있겠지만)
이 때 우리는 괄호 {}를 사용하여 작성한다.

const name = "Btae"
return (
<>
    <p> hello </p> 
    <p> {name}</p>
</>
)

이렇게 단순히 변수를 사용하기도 하고 삼항 연산자, map 등 ( if문, for문 사용 불가)을 사용하여 조건에 맞는 값을 렌더 할 수 있다.

style과 class 설정 방법이 다르다.

HTML과 차이나는 부분 중 하나이다.
코드 언어가 JS이기 때문에 당연하게? background-color와 같은 -로 구분된 속성의 경우 camelCase로 작성해야 한다. backgroundColor

또한 class를 설정할 때 JS에서 class와 겹치기 때문에 className="<클래스명>" 으로 작성해야한다.

const style = {
backgroundColor : 'gray',
color : "#ccc"
}
return(
     <div style={style}>{name}</div>
     {/* <div style={{backgroundColor : 'gray', color : "#ccc"}}>{name}</div> */}
      <div className="gray-box"></div>)

위 코드에서는 스타일을 변수에 할당하는 방법과 inline css 방법을 사용했는데, inline css를 사용하기 위해서는 js코드를 사용하는 {}와 객체 데이터를 표시하는 {} 둘다 사용하기에 2중 {} 로 보일 수 있다.

JSX 주석은 {/* 이렇게*/}

주석 사용 방식이 다르다. JSX 코드에서는 위와 같이 주석을 작성해야 화면에 보이지 않는다.
예시는 위 설명했던 예시 코드에 작성되어 있다.

props

props는 properties의 줄임말로 부모 컴포넌트에서 받아온 데이터 (값)이라 볼 수 있다.

따라서 props를 사용하기 위해서는 기본적으로 전달하고자 하는 부모 컴포넌트 와 받고자 하는 자식 컴포넌트가 있어야 한다.

주고 받는 법 (feat. 비구조화 할당)

function App() {
return (
<Hello name="Btae" />
)
}
{/* 자식 컴포넌트*/}
function Hello(props){
return (<p>안녕하세요 {props.name}</p>)
}

이 코드에서 보면 데이터를 전달하는 방법은 전할 데이터를 이름을 붙여 작성한다. props는 객체형태로 전달 되기 때문에 여기서 이름은 해당 데이터의 key값이 된다.

받는 코드에서는 props로 전달 받아 부모 컴포넌트에서 지정한 key를 사용하여 해당 데이터를 가져올 수 있다.

여기서 "props."으로 받는게 보기 좋지 않다면 혹은 불편하다면 비구조화 할당 방식으로 받을 수 있다.

function Hello({name}){
return (<p>안녕하세요 {name}</p>)
}

전달 할 때 작성한 key 값으로 바로 name이라는 변수에 값을 할당하고 사용 가능하다.

defaultProps 기본 값 설정

props로 전달 받을 값을 부모 컴포넌트에서 지정하지 않았다면 기본 값을 설정하여 사용할 수 있다.

function App() {
return (
<Hello nameYou="Btae" />
)
}
function Hello({nameYou, nameMy}){
return (<p>안녕하세요 {nameYou}님 저는 {nameMy}입니다.</p>)
}
Hello.defaultProps = {
nameMy : "몰라요",
}

위 코드는 "안녕하세요 Btae님 저는 몰라요입니다." 로 출력 될 것이다. 부모 컴포넌트에서 nameMy값을 주지 않았기 때문에 기본 값을 사용했다.

참고자료
벨로퍼트 선생님