[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 19회차 미션 - 30강 React component, JSX
첫 컴포넌트 만들어보기
자, 이제 생성한 우리의 리액트 프로젝트에서 src안에 Hello.js라는 컴포넌트를 하나 만들어보자. 그리고 그 안에 아래와 같이 써준다.
import React from 'react';
function Hello(){ //컴포넌트 이름은 대문자로, 커널형식으로 만듬
return <div>안녕하세요</div>; //jsx형태로
}
export default Hello; //Hello라는 컴포넌트를 내보내겠다!
먼저 import React from ‘react’란 리액트를 불러와서 사용하겠다는 것을 의미힌다. 그리고 컴포넌트를 만들땐 두가지 방식으로 만들 수 있는데 class형태와 함수 형태로 만들 수 있다. class형태는 뒤에 알아보도록 하고 일단 간단한 함수 형태로 만들어보자.
function Hello()라는 컴포넌트를 만드는데 컴포넌트의 이름은 대문자로 시작한다. 다음 단어가 이어진다면 커넬형식으로 계속 이어 붙여주면 된다. (ex. HelloWorld)
그리고 컴포넌트 안에서 jsx형태를 return을 해줘야한다. 함수나 jsx형태 안에서의 세미콜론의 여부는 개인차이다.
또 마지막으로 export default Hello; 로 우리가 만든 컴포넌트를 내보내겠다고 써준다.
이제 App.js로 넘어가보자.
import부분에 logo, App.css등 필요없는 것들은 모조리 지워주고 아래와 같이 써넣어보자.
import React from 'react';
import Hello from './Hello' //상대경로로 불러옴 .js는 생략가능
function App() {
return (
<div>
<Hello />
<Hello />
<Hello />
</div>
);
}
export default App;
우리가 만든 Hello라는 컴포넌트를 위에 import해보자. 그리고 Hello를 App안에서 쓰고 싶을때는 위와 같이
yarn start로 실행시켰던 로컬 웹페이지를 새로고침 해서 확인해보자. 안녕하세요가 세번 삽입되어 있는 것이 보일것이다.
이것처럼 컴포넌트는 UI조각이라고 볼 수 있다.
이제 컴포넌트를 좀 더 살펴보자!
JSX문법
JSX란?
리액트에서 컴포넌트의 생김새를 정의할때 쓰는 문법이다. 얼핏보면 html처럼 생겼지만 사실은 javascript이다. 어떻게 javascript로 되냐하면, babel이라는 도구를 통해서 html의 형태가 js로 변환이 되는데 어떻게 변환이 되는지 직접 확인해보자.
위와 같이 xml형태로 넣어주면 javascript로 변환 되는 것을 바벨사이트를 통해서 확인해 볼 수 있다.
태그는 꼭 닫아주어야 한다.
function App(){
return (
<p></p>
<div></div>
<input/> //self closing
<br/> //self closing
)
}
태그는 무조건 꼭 닫아주어야한다. html5로 넘어오면서 셀프클로징 태그들은 닫아주지 않아도 구동됐었는데 react에서는 xml을 기본으로 하기때문에 규칙에 엄격한 편인것 같다. 셀프클로징 태그들도 무조건 끝에 닫아주어야 한다.
두개 이상의 태그는 꼭 하나의 태그로 감싸줘야 한다.
function App(){
return(
<div>
<Hello/>
<div>안녕히계세요.</div>
</div>
)
}
이런식으로 두개 이상의 태그는 꼭 하나의 태그로 감싸줘야 하는데 이런 불필요한 래핑이 너무 마음에 들지 않는다면 아래와 같이 프래그먼트(<></>)를 사용해서 감싸주면 실제 DOM에는 불필요한 <div></div>가 나오지 않는걸 확인할 수 있다.
function App() {
return (
<>
<Hello/>
<div>안녕히계세요.</div>
</>
)
}
return의 ()는 없어도 된다
function App() {
return <>
<Hello/>
<div>안녕히계세요.</div>
</>
}
이렇게 써줘도 상관없다. 똑같이 구동된다. 그런데 return뒤에 바로 태그가 오니까 라인이 틀어져서 보기 흉하니까(?) 괄호를 써서 한단 내려주는 것이다. 그럼 좀 더 가독성을 높여준다. 한줄짜리는 그냥 괄호 없이 사용하는게 낫다.
JSX내부에서 javascript값 사용하는 방법
function App() {
const name = 'react';
return (
<>
<Hello/>
<div>{name}</div>
</>
)
}
위와 같이 중괄호를 써서 const name의 값을 불러와 줄 수 있다.
스타일과 클래스네임 설정하는 방법
function App() {
const name = 'react';
const style = {
backgroundColor: 'black',
color: 'aqua',
fontSize: 24,
padding: '1rem'
}
return (
<>
<Hello/>
<div style={style}>{name}</div>
<div className="gray-box"></div>
</>
)
}
style은 객체를 선언해주고 그 객체명을 직접 jsx에 꽂아서 사용해야된다. style을 선언해줄 때는 css에서처럼 -를 사용하는 것이 아니라 커넬기법으로 서술해준다.
클래스명도 jsx안에서는 약간 다르다. 그냥 class=”“이렇게 쓰면 안되고 className=”“의 형태로 넣어주어야 한다.
JSX에서 주석 쓰는 법
function App() {
return (
{/*주석을 이렇게 작성합니다*/}
<>
<Hello
//태그 안에서는 주석을 이렇게 작성합니다.
/>
<div
//태그가 열리는 부분에서!
>안녕히계세요.</div>
</>
)
}
정리!
마치면서
오늘은 여기까지..
시청 영상 30강 4~5까지
프론트엔드 개발 올인원 패키지 with React Online. 👉 https://bit.ly/31Cf1hp
Comments