2023. 3. 28

Junghan Lee·2023년 3월 28일
0

TIL Diary

목록 보기
26/52

Index

intro
UI프레임워크,라이브러리(Ant-Design, Material-UI)
모달
State, Prev
캐러셀 이미지 (React-Slick)

Intro

"바퀴를 재발명 하지 마라"
이미 있는 기능을 구현하는데 시간을 쏟지 마라
=> 시간절약, 버그 최소화
무료로 제공되지 않는 어려운 기능, 최신 기능이 필요할 때 직접 만들 필요성이 생긴다. 실력을 쌓고 도전해보자.
스코프와 스코프 체이닝?
https://velog.io/@creyon0215/Learn-Scope-Hoisting

라이브러리(Ant-Design, Material-UI)

UI프레임워크 == UI라이브러리 == 도구 모음
https://ant.design/
https://material-ui.com/
각각은 디자이너의 도움 없이 개발자가 알아서 디자인된 컴포넌트 만들 수 있도록 도와주는 UI 프레임워크

공식문서를 통한 라이브러리 습득력을 키우는 것이 중요(어차피 최신 라이브러리가 계속 나오기 때문)

Ant-Design의 아이콘을 사용하기 위해 Ant Design의 아이콘을 따로 설치해야 함.
(달력이나 별점같은 부분도 이미 포함되어 있다.)

import { Rate } from "antd";
import { useState } from "react";

export default function Star() {
  const [value, setValue] = useState(3);

  function handleChange(value: number) {
    setValue(value);
  }

  return <Rate onChange={handleChange} value={value} />;
} //별점

모달

alert() 대신 modal을 이용해 더 다양한 기능과 디자인으로 경고창을 만들 수 있다. 직접 구현하기, ant-Design이용하기 모두 가능하다.

import { useState } from 'react';
import { Modal, Wrapper, ModalWrapper } from '../../src/test2';
export default function ModalTest() {
	const [isTrue, setIsTrue] = useState(false);

	const handleModal = () => {
		setIsTrue((prev) => !prev);
	};

	return (
		<>
			<Wrapper>
				<button onClick={handleModal}>나와라 모달</button>
				{isTrue && (
					<ModalWrapper>
						<Modal>
							<button onClick={handleModal}>모달 닫기</button>
						</Modal>
					</ModalWrapper>
				)}
			</Wrapper>
		</>
	);
} // 모달 직접 구현

아래는 모달의 CSS 부분

import styled from '@emotion/styled';

export const Wrapper = styled.div`
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
`;
export const ModalWrapper = styled.div`
	position: absolute;
	display: flex;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	background: black;
	opacity: 0.7;
`;
export const Modal = styled.div`
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: white;
	top: 100px;
	width: 300px;
	height: 300px;
	border: 1px solid black;
	border-radius: 20px;
`;

모달은 보통 다른 태그들보다 앞에 있어야 하기 때문에 position:absolute

💡 UI 프레임워크의 종류
앞서 배웠던 아이콘, 별점 등 사용에서는 Ant-Design을 사용하였다. 그리고 Material-UI도 있다. 두 프레임워크 모두 React에 최적화된 UI 프레임워크.
이 외에도 React Bootstrap, Semantic-UI 등이 있다. 각 프레임워크마다 스타일이 조금씩 다르니 원하는 프레임워크를 선택해 사용하면 된다.

주소나 우편번호를 알려주는 라이브러리

또한 존재한다.
https://www.npmjs.com/package/react-daum-postcode

state, prev

state: 리액트 컴포넌트에서 데이터를 담기 위한 상자, 함수가 모두 끝나면 화면에 반영

import { useState } from 'react'

function New() {
    const [count, setCount] = useState(0)
    
    function handleClick() {
        setCount(count + 1)     // 갯수가 증가하면서, 화면에 정상적으로 **반영됨**
    }

    return (
        <div>
            <h1>{count}</h1>
            <button onClick={handleClick}>state를 사용하여 count 증가</button>
        </div>
    )
}

export default New

화면 출력시 버튼 클릭할 때마다 갯수가 1씩 증가하며 정상 반영
count를 5개씩 증가시켜주기 위해 코드가 바뀌면?

function handleClick() {
   setCount(count + 1)      // 현재 count는 0 + 1 => 1을 상자에 담는다.
   setCount(count + 1)      // 1 이 상자에 담겼지만 여전히 count는 0 이므로 1이 상자에 담긴다
   setCount(count + 1)      // ...
   setCount(count + 1)      // ...
   setCount(count + 1)      // 같은 방식으로 최종적으로 1이 상자에 담겨 화면에 1이 반영된다
}

count는 1씩 증가하게 된다. 5씩 증가하기 위해서는 prev라는 임시저장공간이 필요하다.

function handleClick() {
   setCount((prev)=>prev+1)     // 임시저장공간의 0(기본값, prev) + 1 => 1을 상자에 담는다.
   setCount((prev)=>prev+1)     // 임시저장공간에 담긴 1(prev) + 1 => 2를 상자에 담는다.
   setCount((prev)=>prev+1)     // ...
   setCount((prev)=>prev+1)     // ...
   setCount((prev)=>prev+1)     // 같은 방식으로 최종적으로 5가 상자에 담겨 화면에 5가 반영된다
}

prev사용하면 임시 저장공간에 있는 값을 먼저 꺼내오고 없다면 기본값을 불러온다. prev를 활용하면 의도대로 화면에 반영하는 동시에 코드를 리팩토링하는데도 효율적이다.

💡 Fragments
React에서 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화 할 수 있는 태그.
사용 시 key가 없다면 <></> 처럼 빈 태그로 사용할 수 있지만, 만약 key가 있다면 /Fragment 문법으로 명시적으로 선언해주어야 한다.

💡 input tag의 readOnly 속성에 data?.fetchBoard.writer(string)를 넣어주었는데 타입스크립트 오류가 난다.
기본적으로 input tag의 readOnly 속성은 boolean 타입. 때문에 이 타입이 string 타입이 되도록 만들어주어야 한다. 이 문제를 해결하기위해 이중부정연산자를 사용할 수 있다.
data?.fetchBoard.writer은 string 타입이지만 boolean 타입으로 보면 string이 있기 때문에 true. 여기에 !data?.fetchBoard.writer 해주면 false가 되고, 그럼 우리가 할당해준 데이터를 그대로 가져오고싶은 경우에는 !!data?.fetchBoard.writer 처럼 이중부정연산자를 사용하시면 true인 상태 그대로 데이터를 가져올 수 있다. 상황에 따라 부정연산자와 이중부정연산자를 잘 활용해보자.

캐러셀 이미지(React-slick)

사진 넘기는 것을 돕는 라이브러리
https://www.npmjs.com/package/react-slick

profile
Strive for greatness

0개의 댓글