REACT/React-개념정리

[ React ] 실전에서 사용하는 실전형 문법 STEP 정리

찰리-누나 2022. 11. 17.

실제로 개발을 하면서 사용되는 문법들을 개발 시 사용하는 순서에 맞추어서 정리해 보았다. ui나 redux 사용 절차는 언제나 똑같기 때문에 숙지해두면 무조건 도움이 된다. 사실상 나를 위한 메모장..

useState / Component / 동적인 UI 만들기 / map( ) / props / <input> 태그 / import, export / Router / useEffect() /

AJAX, axios / Redux / 삼항연산자의 object , array 자료형 응용 / React-Query / useMemo

useState()

용도 : html에서 보여주어야 하는 내용 중, 자주 변경될 것 같은 것에 사용한다. state가 바뀌면 html은 자동으로 재렌더링된다.

▼ 사용법

1. import { useState() } from 'react';

2. let [state이름, state변경함수] = useState('초깃값')

3. html에서 {state이름} 으로 호출

4. state변경함수('변경할값') 으로 state 상태 변경

6. ★ state가 array, object일 경우 state 값 변경하는 방법
// ...[1,2,3] => 1,2,3 . '...' 는 괄호 벗기기용 연산자.
let copy = [...state이름]
copy[0] = '바꿀 내용'
state변경함수(copy)

Component

용도 : 복잡한 html을 한 단어로 치환할 수 있게 해준다. 주로 재사용이 잦은 부분, 내용이 자주 변경될 것 같은 부분 등을 컴포넌트화 한다.

▼ 사용법

1.

function 컴포넌트명() {

return (

<div>

</div>

)
}

2. 컴포넌트를 사용할 곳에서 <컴포넌트명></컴포넌트명> 으로 호출.

3. arrow function으로도 생성 가능.
let 컴포넌트명 = () => { return ( <div> </div> ) }

4. props, 또는 import 문을 통해 전달하면 다른 곳에서의 사용이 가능하다.

동적인 UI 만들기

용도 : 클릭에 따라, 또는 상태에 따라 보였다가 보이지 않게 바뀌어야 하는 동적 UI를 만들 때 사용한다.

▼ 사용법

1. HTML, CSS로 디자인하기

2. UI의 현재 상태(보일지, 보이지 않을지) 의 상태를 state로 저장한다.

let [ view, setView ] = useState(false)

3. state에 따라서 UI가 어떻게 보일지 작성한다.

return (
{ view ? <UI></UI> : <div> 보이지 않는 상태 </div> }
)

map( )

용도 : 주로 array 자료의 개수에 따라 반복해서 html을 생성할 때 사용한다.

▼ 사용법

// content에는 array[i]에 담긴 내용이 들어있다.

1. array.map(function(contentArray,i) {
return (
<div> {contentArray} </div>
)
}

props

용도 : 부모가 가지고 있는 컴포넌트를 자식이 사용하고 싶을 때 사용한다.

▼ 사용법

1. 부모 컴포넌트의 자식 컴포넌트가 사용되는 곳에서 <자식컴포넌트명 작명={state이름}/>
2. 자식 컴포넌트에서 파라미터에 props 등록 후 props.작명 으로 사용

ex)

function App() {

let [부모가가진state, setState] = useState()

return (
<div>
<Children 프롭스보냄={부모가가진state} />
</div>
)
}

function Children (props) {

return (

<div>{props.프롭스보냄}</div>

)
}

<input> 태그

용도 : 사용자에게 내용을 입력받기 위해 사용한다.

▼ 사용법

1. 사용자가 입력한 내용을 onChange 메서드로 받아놓을 State를 만든다.

2. onChage에 e.target.value를 사용하여 setState로 사용자가 입력한 내용을 state에 저장할 수 있게 한다.

function App (){

  let [input, setInput] = useState('')

  return (

    <input onChange={(e)=>{

setInput(e.target.value)
      console.log(input)

}} />

)

}

import, export

용도 : 길어진 코드를 export 하여 다른 js 파일에서 사용한다.

▼ 사용법

1. 사용할 컴포넌트를 export 한다.

export default 컴포넌트명

2. 사용할 컴포넌트를 import 한다.

import 컴포넌트명 from '경로'

Router

용도 : 경로에 따라 각각 다른 js 파일을 보여준다. (페이지를 나눈다.)

▼ 사용법

1. 터미널에서 npm install react-router-dom@6 로 설치한다.

2. index.js 를 설정한다.

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

<React.StrictMode>
      <BrowserRouter>
        <App />
      </BrowserRouter>
  </React.StrictMode>

3. App.js에서 사용한다.

<Route path="/" element={ <App/> } >

4. nested (서브경로) rotues는 아래와 같이 사용한다. /first/second 또는, /first/third로 방문했을 경우 최상위 부모 컴포넌트인 First 속 Outlet이 하위 경로 second, third의 element가 표시될 위치이다.

<Route path="/first" element={ <First/> } >
<Route path="second" element={ <div>fist 내부의 요소</div> } />
<Route path="third" element={ <div>second 내부의 요소</div> } />
</Route>

function First(){
  return (
    <div>
      <h4>First 페이지입니다.</h4>
      <Outlet></Outlet>
    </div>
  )
}

useEffect()

용도 : useEffect() 내부에 작성한 코드는 컴포넌트가 로드되거나 업데이트 될 때마다 실행되는데, html 렌더링 이후에 동작한다.

▼ 사용법

1. import {useEffect} from 'react'; 로 import 해온다.

2.

  useEffect(()=>{

    console.log('컴포넌트가 로드되거나, 업데이트 될 때마다 실행됩니다.')
console.log('또한 이곳의 모든 문장은 html렌더링 이후에 동작하며,')
console.log('만일 아래의 파라미터에 변수를 넣으면 [ ] 내부의 변수 또는 state가 변할 때만 useEffect가 실행됩니다.')

return () => {
console.log('이곳에 있는 문장은 useEffect안의 코드 실행 전에 먼저 항상 실행됩니다.')
console.log('만일 아래 파라미터를 작성하면 컴포넌트가 unmount될 때 1회 실행됩니다.')
}

  },[파라미터여러개넣기가능]);

AJAX, axios

용도 : API에 GET, POST 요청할 때 새로고침 없이 데이터를 주고받게 해 주는 기능.

▼ 사용법

1. XMLHttpRequest, fetch(), axios 중 하나 택해 사용.

2. axios는 라이브러리로 npm install axios로 설치

3. import axios from 'axios' 로 import 한다.

4.
//get 요청
// result.data에 가져온 결과가 들어있다.
axios.get('API경로').then( (result) => {console.log(result.data) })
.catch( () => { console.log('실패') })

//post요청
axios.post('API경로', {보낼자료:'document')

5. fetch 이용

fetch('URL').then(결과 => 결과.json()).then((결과) => { console.log(결과) } )

Redux

용도 : props 없이 state를 공유할 수 있게 도와주는 라이브러리. 모든 컴포넌트에서 사용할 수 있는 공통 state를 관리한다.

▼ 사용법

1. npm install @reduxjs/toolkit react-redux 로 라이브러리를 설치한다.

2. store.js 파일을 생성한다.

3. 아래 내용을 작성한다.

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
})

4. index.js에 아래 내용을 작성한다.

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

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

ex 사용 예시)

store.js
-------------------------------------------------------------------------------

import { configureStore, createSlice } from '@reduxjs/toolkit'

let user = createSlice({
  name : 'user',
  initialState : 'chalinuna',
reducers : { //state를 변경할 수 있는 함수
    changeName(state, action){
      return state + action.payload //atcion.payload에는 '불러온 곳에서 받아온 값' 이 들어있다.
    }
})

export default configureStore({
  reducer: {
    user : user.reducer
  }
})

export let { changeName } = user.actions

사용할 곳
-------------------------------------------------------------------------------

import { useDispatch, useSelector } from "react-redux"

function Login(){
  let name = useSelector((state) => { return state } )
let dispatch = useDispatch()
  console.log(name) //결과 : chalinuna

  return (
<div>

<div> {name} </div>
<button onClick={()=>{
dispatch(changeName('cat')) //Store에 저장된 user의 값이 chalinunacat 이 된다.
}}>누르면 이름을 바꿉니다.</button>

</div>)
}

삼항연산자의 object / array 자료형 응용

용도 : 경우에 따라서 다른 html 태그들을 보여주고 싶은 경우 사용한다.

▼ 사용법

function Component() {

  var select= 'A';

return (
    <div>
      {
        { //중괄호 뒤에 붙은 [select] 에 담긴 값이 A면 첫줄, B면 둘째줄, C면 셋째줄을 실행한다.
           A: <p>A일때 보여줄 내용</p>,
           B: <p>B일때 보여줄 내용</p>,
C: <p>C일때 보여줄 내용</p>
        }[select]
      }

    </div>
  )
}

React-Query

용도 : 실시간으로 보여주는 데이터가 중요한 경우 사용한다.

▼ 사용법

1. npm install @tanstack/react-query

2. import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query'

3. useQuery(['이름짓기'] 로 사용한다.

4. index.js 파일을 수정한다.

import { QueryClient, QueryClientProvider } from "react-query"
const queryClient = new QueryClient()

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

5. ajax를 위한 axios 요청 시 사용한다.

function App () {
let result = useQuery('이름짓기', () =>
axios.get('API경로')
.then( (result) => {return result.data}) )
return(
<div>

// result에 ajax의 상태가 자동으로 저장되어있다.
{ result.isLoading && '로딩중입니다.' }
{ result.error&& '로딩중입니다.' }
{ result.data && result.data.name }

</div>

useMemo

용도 : useMemo 안의 문장은 컴포넌트 로드 시 1회만 실행한다. 따라서 재렌더링마다 불필요하게 반복할 필요 없는 문장을 작성할 수 있다.

▼ 사용법

1. import useMemo from 'react'

2. function repeat(){
  return 반복문100번돌린결과
}

function Cart(){

  let result = useMemo(()=>{ return repeat() }, []) // 컴포넌트 로드 또는 [] 가 변할 때 1회만 실행된다.

  return (
    <Child />
    <button onClick={()=>{ setCount(count+1) }}> + </button>
  )
}

'REACT > React-개념정리' 카테고리의 다른 글

[React] 모바일에서 100vh 맞추기 (0)	2023.01.19
[React] React Templates (0)	2022.12.06

[ React ] 실전에서 사용하는 실전형 문법 STEP 정리

'REACT > React-개념정리' 카테고리의 다른 글

댓글

티스토리툴바