1. 컴포넌트 생성
리액트는 여러개의 컴포넌트를 만들고, 그 컴포넌트를 조합해서 만들어가는 형태이다. 컴포넌트를 만드는 이유는 "재사용"이 가능하기 때문이다. 컴포넌트는 무한정으로 생성되는 레고의 블럭같은 것이다. 이 블럭을 잘 조합해 완성품(프로그램)을 만드는 것이다.
컴포넌트는 재사용이 많이 되거나, UI 일부가 자체적으로 복합한 경우 컴포넌트로 만들면 좋다.
컴포넌트를 만드는 방법에는 여러가지 방법이 있다.
(1)javascript함수 사용
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}(2) class 문법 사용
class Welcome extends React.Component{
render(){
return <h1>Hello, {this.props.name}</h1>;
}
}컴포넌트 이름은 항상 대문자로 시작해야 한다!
2. 컴포넌트 렌더링
컴포넌트는 dom 태그로도 나타낼 수 있으나, 사용자가 만든 사용자 정의 컴포넌트로도 나타낼 수 있다.
//닫는 태그가 없다면 무조건 />로 닫아주어야 한다.
<Welcome />컴포넌트는 블럭같은 것이기 때문에 합성할 수도 있다.
function Welcome(props){
return <h1>Hello, {props.name}</h1>
function App(){
return(
<div>
<Welcome name="jina" />
<Welcome name= "Yujin" />
</div>
)
}블럭(파일)은 다른 객체이기에 필연적으로 다른 파일 사이에 데이터를 불러오거나(import), 보내는 (export)과정이 필요하다. 이떄 다음과 같은 규칙이 있다.
- component를 만들 때에는 파일명을 대문자로 지어야 한다.
- 보내는 파일이 하나면 export default를 쓰고, 아니면 export를 쓴다
{}(객체)를 export 할때는 export한 key값(이름)을 그대로 사용하되, 이 경우가 아니면 이름은 맘대로 지어도 된다.
컴포넌트들을 만들어 아래와 같이 component라는 파일에 넣어주었다. react는 파일이 많은 만큼 파일관리가 필수적이다.
위의 DayList를 컴포넌트로 활용하기 위해서는 다음과 같이 해당 파일에서 DayList를 export해주어야 한다. 다음은 DayList라는 함수 자체를 보낸 코드이다.
export default 보낼 컴포넌트명
다른 파일에서 DayList라는 컴포넌트를 쓰려면 다음과 같이 작성하면 된다. 이때 이름은 export할때 이름과 같을 필요는 없다
두번째와 같이 {}안에서 2개이상을 import 할때에는 정해진 이름을 사용해야 한다. 이 값이 곧 export 한 객체에서 key값이 되기 때문이다.
import 컴포넌트명 from "경로"
import {useState, useEffect} from 'react'
import가 완료되면 해당 파일에서 <컴포넌트명> 으로 사용할 수 있다.
CSS
일반 css파일 import
일반적으로 app.css에다가 css를 넣을 수 있다. 이때도 해당 css파일이 import 되었는지 확인해주어야 한다.
import "./app.css";이런 일반적인 css방식을 사용할 경우, 같은 클래스명끼리 충돌하여 오버라이딩 되는 현상이 발생할 수 있다.
styled component 사용
styled component를 사용하면 컴포넌트에다가 더 작은 단위의 스타일 컴포넌트를 만들어 쉽게 css를 관리할 수 있다. 이것은 외부 라이브러리이므로 import 하는 과정이 필요하다.
<npm 설치 명령어>
npm install styled-components설치가 끝났다면 css를 주고 싶은 컴포넌트/파일에 import를 시켜준다. 외부 라이브러리를 import 하는 방식은 모두 동일하다.
import styled from "styled-components";사용법은 다음과 같다.
- 스타일 컴포넌트를 만든다.
- 만든 컴포넌트를 사용한다.
매우 간단하다. 스타일 컴포넌트는 다음과 같이 만들 수 있다.
const ItemBlock = styled.div`
width: 380px;
height: 450px;
margin-bottom: 120px;
background-color: grey;
`;위와 같이 컴포넌트명으로 쓸 변수명에다가 styled.+태그명을 쓰고, 백틱 사이에 원하는 css를 집어넣으면 된다. 이때 주의할 점은 컴포넌트명은 무조건 대문자로 집어넣어야 한다는 것이다. 대문자로 지정하지 않으면 오류가 난다.
태그의 경우 div뿐만 아니라 img , span등 만들고 싶은 태그를 다양하게 지정할 수 있다는 장점이 있다.
css module
이를 방지하기 위해 리액트에서는 css 모듈을 사용할 수 있다. 이때 파일명은 이름.module.css 로 짓는다. 이때 import하는 방법과 사용법도 일반 css와 차이점이 있다. 사용할 때는 style.css명으로 사용한다.
//파일명
이름.module.css
//import문법
import styles from "./App.module.css";
//사용법
<div className={styles.box}>box</div> 