리액트에선 컴포넌트 선언 방식은 크게 두 가지로 나뉜다.

첫 번째는 클래스형 컴포넌트와

두 번째는 함수형 컴포넌트이다.

현재는 대부분 함수형 컴포넌트로 개발을 진행하지만 과거 프로젝트를 마이그레이션 하거나 유지보수를 하기위해 클래스형 컴포넌트에 대한 개념을 알고 있으면 도움이 된다.

특징

클래스형 컴포넌트

1. class 키워드로 시작

2. Component로 상속 받음

3. render() 함수를 사용해서 JSX를 반환

4. props를 조회할 때 this 키워드 사용

함수형 컴포넌트

1. JSX를 return문을 사용해서 반환

2. state를 사용할 수 없다

3. 생명주기 함수를 작성할 수 없다.

마지막으로 두가지의 컴포넌트 선언 방식은 생명주기를 다룰때도 차이가 나는데

클래스형 컴포넌트는 this를 통해 생명주기를 다루며

함수형 컴포넌트는 useState와 useEffect를 이용하여 생명주기를 다루게된다

state란 무엇인가?

간단하게 말해서 state는 변수이다.

state는 일반변수와 다르게 값이 변하면 렌더링이 일어나는 객체임

setState를 사용하는 이유

state는 immutble(불변성)을 유지해야 하기 때문이다.
state는 컴포넌트 렌더링에 영향을 주는 데이터를 갖고 있는 객체인데, 이것을 업데이트 하기 위해서는 setState,useState가 필요하다. 직접 state를 수정하면 리액트는 render 함수를 호출하지 않아서 렌더링이 일어나지 않고 setState를 호출하여 state를 변경하면 리액트 엔진이 render 함수를 이용해서 렌더링을 실행하기 때문

참고링크

https://velog.io/@codns1223/React-state-변경시-setState로-변경해야-하는-이유

Hook이란

Hook은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능

Hook이 필요한 이유

클래스형 컴포넌트에서만 가능하던 상태관리를 더 손쉽게 할 수 있기 때문

주의사항

Hook은 브라우저의 메모리 자원을 사용하기에 함부로 남발하면 오히려 성능저하를 일으킴

주요 Hooks

1. useState (동적 상태 관리)
2. useEffect (side effect 수행 -mount/unmount/update)
3. useContext (컴포넌트를 중첩하지 않고도 전역 값 쉽게 관리)

그외 Hooks

1. useReducer (복잡한 컴포넌트들의 state를 관리 -분리)
2. useCallback (특정 함수 재사용)
3. useMemo (연산한 값 재사용)
4. useRef (DOM선택, 컴포넌트 안에서 조회/수정할 수 있는 변수 관리)
5. useImperativeHandle
6. useLayoutEffect
7. useDebugValue

참고링크

https://velog.io/@goyou123/React-Hooks-총정리

Redux는 React에서 컴포넌트들이 props 없이 state를 공유하기 위해 자주 사용하는 라이브러리이다.

Redux를 사용하기 위해 터미널에 다음과 같이 입력해 라이브러리를 설치해준다

$npm install @reduxjs/toolkit react-redux

src파일에 store.js 파일 생성 후 다음과 같이 코드 입력

//store.js

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { 
  
  }
})

index.js 에서 다음과 같이 코드 입력

// index.js

...

import { Provider } from "react-redux";
import store from './store.js'


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

이렇게 해서 Redux를 사용할 준비가 끝났다.

Ajax 구현을 위해 Axios를 사용하려고 한다.

axios 라이브러리를 설치를 위해 터미널에 다음과 같은 코드를 입력한다

$npm install axios

axios를 import 해줌

import axios from 'axios'

get요청

{
  axios.get('요청URL')
  .then((data) => {
    console.log(data)
  })
  .catch((err) => {
    console.log(err)
  })
}

useEffect는 mount, update될 때, 실행됨

만약, useEffect밖에 코드가 있다면 HTML이 렌더링 되기 전에 연산을 하고

useEffect안에 코드가 있다면 HTML이 렌더링 된 뒤 연산을 하게 됨

useEffect안에 적을 코드로 적절한것은

• 시간이 오래 걸리는 연산
• 서버에서 데이터를 가져오는 작업
• 타이머 장착

등이 있음 

useEffect(() => {
    코드1
  }, [])

다음과 같이 함수 뒤에 빈 어레이 [] 만 넣게되면 컴포넌트 mount시 1회만 실행하게 됨

useEffect(() => {
    코드1
    return () => { 코드2 }
  }, [])

return안에 있는 코드2는 clean up function이라고 부르며 useEffect 동작전에 실행됨

clean up function은 특이하게 mount시 실행되지않고 unmount시 실행됨

터미널에 아래와 같은 명령어 입력

$npm install styled-components

styled-components를 사용하고자 하는 컴포넌트에서 import 해줌

import styled from 'styled-components'

styled-components 사용하기

// 백틱(`)을 이용해 변수에 스타일값 저장

let Box = styled.div`
  padding : 20px;
  color : grey;
`;

// 스타일 값에 변수 입력가능

let Box = styled.div`
  background : ${ props => props.bg };
  padding : 20px;
  color : grey;
`;

function Home() {
  return (
    <div>
      <Box bg="orange"> 오렌지색 박스 </Box>
      <Box bg="blue"> 파란색 박스 </Box>
    </div>
  )
}

// 삼항연산자같은 간단한 프로그래밍도 가능

let Box = styled.div`
  background : ${ props => props.bg };
  padding : ${ props => props.bg == 'blue' ? 'white' : 'black' };
  color : grey;
`;

function Home() {
  return (
    <div>
      <Box bg="orange"> 오렌지색 박스 </Box>
      <Box bg="blue"> 파란색 박스 </Box>
    </div>
  )
}

// 스타일 상속 가능

let Box = styled.div`
  background : ${ props => props.bg };
  padding : ${ props => props.bg == 'blue' ? 'white' : 'black' };
  color : grey;
`;


let Box2 = styled.div(Box)`
  margin : 20px;
`

React Router 설치하기

터미널에서 해당 명령어 입력

$ npx create-react-app react-router-app // 프로젝트 생성

$ cd react-router-app // 디렉토리 이동

$ npm install react-router-dom@6 // react router 설치

index.js에서 <app />을 <BrowserRouter>로 감싸기

// index.js

import { BrowserRouter} from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
    <App />
    </BrowserRouter>
  </React.StrictMode>
);

App.js에서 Routes, Route, Link를 import 해준 후 자유롭게 사용

// App.js

import { Routes, Route, Link } from 'react-router-dom'

// ...생략

function App() {
  return (
    <Routes>
      <Route path="/" element={<div> 메인페이지 </div>} />
      <Route path="/detail" element={<div> 상세페이지 </div>} />
    </Routes>
    
    <Link to="/"> 메인페이지 </Link>
    <Link to="/detail"> 상세페이지 </Link>