본문 바로가기
리엑트/[코딩애플] React 리액트 기초부터 쇼핑몰 프로젝트까지

컴포넌트 만드면 좋은 점

by 문자메일 2024. 10. 22.

 

어떤걸 컴포넌트로 만들면 좋은가?

 

 

어떤걸 컴포넌트로 만들면 좋은가?

1. 반복적인 html을 축약할 때

2. 큰 페이지들

3. 자주변경되는 것들

 

단점은?

state 가져다쓸 때 문제생김

 

 

 

리액트 환경에서 동적인 UI 만드는 법 (ex: 모달창 만들기)

 

 

[동적인 UI 만드는 3 step]

1. html css로 미리 디자인완성

2. UI의 현재 상태를 state로 저장

3. 조건문으로 state에 따라 UI가 어떻게 보일지 작성

 

 

 

 

map : 많은 div들을 반복문으로 줄이고 싶은 충동이 들 때

 

[1, 2, 3].map(function () {
    console.log(1);
  });

 

배열.map(콜백함수) 로 사용한다.

 

map() 함수

1. 왼쪽 array 자료만큼 내부코드 실행해준다.

2. return 오른쪽에 있는걸 array로 담아준다.

3. 파라미터 2개 사용 가능하다. (item과 index)

 

 

자식이 부모의 state 가져다쓰고 싶을 때는 props

 

부모-> 자식 state 전송하는 법

1. <자식컴포넌트 작명={state이름}

2. props 파라미터 등록 후 props.작명 사용

 

 

props를 응용한 상세페이지 만들기

state 만드는 곳은 state 사용하는 컴포넌트들 중 최상위 컴포넌트

 

 

 

<input>에 뭔가 입력시 코드실행하고 싶으면

onChange / onInput, 이벤트 핸들러는 매우 많으니 필요하면 검색해서 쓰자

 

<input>에 입력한 값 가져오는 법

onChange={ (e) => {e.target.value} } //  e.target = 이벤트 발생한 html 태그임

 

 

이벤트가 상위 html으로 퍼지는 것, (이벤트 버블링 현상, 막는법은 e.stopPropagation() )

 

 

전환 애니메이션 (transition)

1. 애니메이션 동작 전 className 만들기

2. 애니메이션 동작 후 className 만들기

3. className에 transition 속성 추가

4. 원할 때 2번 className 부착

 

 

 

setTimeout() 안에서 state를 바꿔야 하는 이유는, 리액트 18버전 이상에서는 automatic batching 기능이 생겼는데,

state 변경하는 함수들이 근처에 있으면 하나로 다 합쳐서 state를 최종적으로 한 번만 변경해준다.(제일 마지막 state 변경만 렌더링 해주기 때문이다.)

 

 
function TabContent(props) {
  let [fade, setFade] = useState("");

  useEffect(() => {
    let a = setTimeout(() => {
      setFade("end");
    }, 100);
    return () => {
      clearTimeout(a);
      setFade("");
    };
  }, [props.탭]);

  return (
    <div className={`start ${fade}`}>
      {[<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][props.탭]}
    </div>
  );
}

 

 

 

Redux 사용하기

세팅1. store.js 파일 생성 및 기본 코드 작성

import { configureStore } from "@reduxjs/toolkit";

export default configureStore({
  reducer: {},
});

 

세팅 2. index.js 가서 <Provider store={store}> 쓰기

그러면 아래 <App /> 컴포넌트 하위 컴포넌트는 store.js에 있던 state 전부 사용이 가능하다.

import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import store from "./store.js";

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

 

----

리덕스 state 생성하기! 

1. createSlice로 생성

2. reducer에 만든 slice 등록

3. 사용하려고 하는 컴포넌트에서 useSelector()으로 가져와서 변수에 저장해서 사용

// useState 역할
let user = createSlice({
  name: "user",
  initialState: "kim",
  reducers: {
    changeName(state) {
      // state는 기존 state를 뜻함
      return "john " + state;
    },
    다른함수() {},
  },
});

export let { changeName, 다른함수 } = user.actions;

let cart = createSlice({
  name: "productList",
  initialState: [
    { id: 0, name: "White and Black", count: 2 },
    { id: 1, name: "Grey Yordan", count: 1 },
  ],
});

export default configureStore({
  // 만든 slice는 reducer에 등록해야 함
  reducer: {
    유저_user: user.reducer,
    카트_cart: cart.reducer,
  },
});

 

function Cart() {
  let cart = useSelector((state) => {
    return state.카트_cart;
  });

 

----

Redux state 변경하려면

 

1. state 변경해주는 함수 만들기

2. 만든 함수 export 하기

// useState 역할
let user = createSlice({
  name: "user",
  initialState: "kim",
  reducers: {
    changeName(state) {
      // state는 기존 state를 뜻함
      return "john " + state;
    },
    다른함수() {},
  },
});

export let { changeName, 다른함수 } = user.actions;

 

3. state 사용하고 싶은 곳에서 dispatch(state변경함수()) 호출하여 수정하기

import { useDispatch, useSelector } from "react-redux";
import { changeName } from "../store";

function Cart() {
  let cart = useSelector((state) => {
    return state.카트_cart;
  });
  let dispatch = useDispatch();
                  <button
                    onClick={() => {
                      dispatch(changeName());
                    }}

 

 

 

 

리액트에서 자주쓰는 if문 작성패턴 5개

1. 컴포넌트 안에서 쓰는 if/else

JSX 안에서는 if문 사용이 불가능하다.

 

그래서 JSX 전체를 return 하는 컴포넌트를 만들어서 주로 사용한다.

function Component(){
        if(true){
          return <div>aaaa</div>
        }else{
          return <h1>aaaaa</h1>
        }
      }

 

 

2. 삼항연산자

이건 잘 아니 pass, 삼항연산자 중첩도 됨

 

 

3. &&, || 연산자 사용하기

 

 

4. switch / case 조건문 사용하기

function Component2() {
        var user = "seller";
        switch (user) {
          case "seller":
            return <h4>판매자 로그인</h4>;
          case "customer":
            return <h4>구매자 로그인</h4>;
          default:
            return <h4>그냥 로그인</h4>;
        }
      }

 

 

5. Object / array 자료형 응용

      const dict = {
        aa: <div>aa</div>,
        bb: <h2>bb</h2>,
        cc: <h1>cc</h1>,
      };

      function Component(){
        var 현재상태 = 'aa';
        return(
          <div>
            {
              dict[현재상태]
            }
          </div>
        )
      }

 

 

 

 

React Query

React Query 라이브러리 사용시 유용한 상황

- ajax 성공시/실패시 html 보여주려면

- 몇초마다 자동으로 ajax 요청

- 실패시 몇초 후 요청 재시도

- prefetch

 

장점1. ajax 요청 성공/실패/로딩중 쉽게 파악가능

장점2. 틈만나면 자동으로 refetch(재요청)해줌

장점3. 요청 실패시 요청 retry 알아서 해줌

장점4. state 공유 안해도 됨

장점5. ajax 요청 결과 캐싱 기능

 

 

 

리액트 성능 개선 테크닉 

 

1. Lazy import

 

2. 재렌더링 막는 memo, useMemo

 

아래 Child 컴포넌트 memo

memo의 원리 : props가 변할 때만 재렌더링해준다.

 

import { memo, useEffect, useState } from "react";
let Child = memo(function () {
  console.log("제렌더링");
  return <div>자식임</div>;
});

function Cart() {
  let dispatch = useDispatch();
  let [count, setCount] = useState(0);

  let state = useSelector((state) => {
    return state;
  });

  return (
    <div>
      <Child></Child>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        버어튼
      </button>

 

 

아래에서는 Child에 props로 count를 전달하는 경우, count 값이 변할 때만 재랜더링 된다.

 

아래처럼 useMemo 훅을 사용해서 최초 렌더링 될 때나, 특정 state가 변할 때만 렌더링 되도록 할 수 있다.

기능상으로는 useEffect와 비슷하다. 

 

function 함수(){
  return 반복문 10억번 돌린 결과;
}

function Cart() {

  let result = useMemo(()=>{return 함수()}, [state])

 

 

 

 

state 변경함수 사용할 때 주의점 : async

자바스크립트의 sync / async 관련 상식

 

자바스크립트는 일반적인 코드를 작성하면 synchronous 하게 처리된다.

코드 적은 순서대로 윗줄부터 차례로 코드가 실행된다는 뜻이다.

 

그런데 자바스크립트는 특정 함수들을 사용하면 asynchronous(비동기적으로) 하게 코드실행이 가능하다.

ajax, 이벤트리스너, setTimeout 같은 함수들을 쓸 때 비동기적으로 동작한다.

이런 함수들은 처리시간이 오래걸리는 특징이 있다.

 

마찬가지로 리액트의 setState 함수는 asynchronous 하게 동작한다.

 

그래서 위처럼 함수에서 연속적으로 state를 변경하고 있고, 그 중간 과정에서 상태값을 if 조건문으로 사용하는 경우 비동기적 특성때문에 의도한대로 로직이 동작하지 않을 수 있다.

setCount(count + 1) 의 카운트 횟수 증가 로직 완료보다, if (count < 3 ) 이 먼저 실행되는 케이스 발생함!!

 

그래서 리액트에선 위의 케이스처럼 state1 변경하고 나서, state2를 변경하는 코드를 작성할 땐,

정확히 sync스럽게, 순차적으로 실행하고 싶을 때 해결책은 useEffect이다.

useEffect를 잘 작성하면 특정 state가 변경될 때 useEffect를 실행할 수 있다.

 

function App(){
  let [count, setCount] = useState(0);
  let [age, setAge] = useState(20);

  useEffect(()=>{
if(count<3){
setAge(age+1);
}
}, [count])

  return (
    <div>
      <div>안녕하십니까 전 {age}</div>
      <button onclick=(()=>{
setCount(count + 1);
)>누르면한살먹기</button>
    </div>
  )

}

댓글

티스토리툴바