Component

컴포넌트란 UI 또는 기능을 부품화해서 재사용 가능하게 할 수 있는 것 입니다.
컴포넌트 하나를 잘 만들면 계속해서 재사용이 가능함으로 유용하게 쓰일 수 있습니다.
이렇게만 보도 Component는 React의 핵심이라고 해도 과언이 아닙니다.

컴포넌트 사용 구조

위 이미지처럼 원본 컴포넌트를 만들어 놓고 사용할 각 페이지에서 컴포넌트를 불러와 사용할 수 있으며 데이터는 각 컴포넌트에 맞게 변경하여 사용가능합니다. 그리고 각 사본 컴포넌트의 속성을 수정해도 원본 컴포넌트에 영향을 끼치지 않습니다.

원본 컴포넌트가 통제하는 방식으로 원본만 변경하면 뿌려진 다른 컴포넌트 모두 적용됩니다.
그리고 데이터는 각 컴포넌트에 맞게 변경하여 사용가능합니다.

사용 방법

사용할 페이지나 컴포넌트에서 원본 컴포넌트를 import 해줍니다.
그리고 아래의 코드와 같이 작성해주며 컴포넌트를 사용할 수 있습니다.

import BoardDetail from "./Board.container";

const BoardDetailPage = () => {
  return <BoardDetail />;
}

export default BoardDetailPage

위 코드는 동일한 폴더 안의 Board.container 파일의 컴포넌트를 가져와서 사용하는 부분입니다.
<BoardDetail /> 작성을 통해 컴포넌트를 가져와 위와 같이 사용할 수 있습니다.

또한 아래와 같이 컴포넌트를 연속적으로도 사용이 가능합니다.

import BoardDetail from "./Board.container";

const BoardDetailPage = () => {
  return(
    <>
      <BoardDetail />
      <BoardDetail />
      <BoardDetail />
      <BoardDetail />
    </>
  )
}

export default BoardDetailPage;

Hooks

React Hooks는 React v16.8에 새로 추가된 기능으로 상태값과 여러 React의 기능을 사용할 수 있습니다.
예를 들어 function component에서 state를 가질 수 있게 된 것 입니다. React Hooks를 사용한다면 class component, render 등을 안해도 됩니다. 간단하게 말하자면 간단한 함수형 컴포넌트로 클래스형 컴포넌트를 대신 할 수 있습니다.

아래의 코드는 Hooks 사용 여부에 따른 간단한 예제 코드입니다.

import { Component } from "react";

class New extends Component {
	constructor(props) {
		super(props) // 다른 컴포넌트한테 받은 데이터
		this.state = {} // 컴포넌트 안에 보관해둘 데이터
	}

	componentDidMount() {
		// 컴포넌트가 최초 그려진 후 수행
	}
	
	componentDidUpdate() {
		// 컴포넌트가 변경되었을때 실행
	}

	render() {
		return <div>이것은 클래스형 컴포넌트입니다.</div>
	}
}

class component

import { useState, useEffect } from "react"

function New(props) {
	const [state] = useState({})

	useEffect( ()=> {
		// 컴포넌트가 최초 그려진 후 실행
	}, [])

	useEffect(() => {
		// 컴포넌트가 변경되었을때 실행
	})

	return <div>이것은 함수형 컴포넌트입니다.</div>
}

export default New

react-hooks

UseState

state : 컴포넌트에서 사용하는 변수
setState : 컴포넌트에서 사용하는 변수를 바꿔주는 기능
useState : 컴포넌트에서 사용하는 변수를 만들어주는 기능

원래 변수를 선언할 때에는 let, var 등으로 선언했지만 react component에서는 state를 사용합니다.
let 이나 var 같은 변수에서는 UI에 실시간 데이터 반영이 어렵지만 state를 통해서 즉각 반영이 가능하게 됩니다.

아래의 코드는 javascript와 react component에서 변수를 만들었을 떄의 차이점입니다.

// javascript
let classmate = "철수"
classmate = "영희" // classmate의 값이 '영희'로 바뀝니다.

// react-component
const [classmate, setClassmate] = useState("철수") // 초기값 선언
setClassmate("영희") // classmate의 값이 '영희'로 바뀝니다.

import & export

현재 파일에서 다른 파일의 태그나 참조할 일이 생긴다면 해당 파일을 import 해줘야 합니다.
가져올 파일에서는 export 를 해줘야하며 받는 파일에서는 import 를 해줘야 합니다.

라이브러리같은 경우는 export 는 거의 없고 사용할 파일에서 import만 헤주시면 됩니다.

// 라이브러리 불러올 떄의 예시
import { useState } from 'react'
// useState를 불러와서 사용
const [write, setWrite] = useState("")

라이브러리 사용

// 또한 다른 파일에서 불러올 때는 불러올 파일 코드내에서 아래와 같이 export를 해주고
export const MyButton = styled.button`
	width: 100px;
	height: 50px;
	background-color: purple;
`

// 사용할 파일에 아래와 같이 import하여 사용해야합니다.
import { MyButton } from '불러올 파일 경로'

const Page = () => {
	return <MyButton>버튼입니다!</MyButton> // 이런식으로 사용이 가능합니다.
}

custom으로 만든 버튼 사용

import와 export 간단한 예제