[회고] React Custom Component

선유준·2023년 2월 22일
0

BOOTCAMP

목록 보기
4/11

과제1

component들이 작동하는 로직을 의사코드로 작성하세요.

컴포넌트의 전체 코드가 궁금하다면? 링크

모달창은 모달버튼을 클릭했을 때, 모달창이 보여지게 하면 된다.

먼저 사용한 상태, 함수부터 정리해보자

const [isOpen, setIsOpen] = useState(false);

isOpen은 모달 창이 열리고 닫히는 것을 확인할 수 있는 상태이다.

const openModalHandler = () => {
    setIsOpen(!isOpen)
  };

openModalHandler는 isOpen의 상태를 변경시켜주는 함수이다.

상태가 변경 되는 경우는

  1. 모달버튼을 눌렀을 때 -> true가 되면서 모달창이 열려야함
  2. 모달창이 열리고, 모달창 외의 영역을 클릭했을 때 -> false가 되면서 모달창이 닫혀야함

이를 편하게 관리하기 위해서 상태 변경 함수에 !isOpen으로 작성해줬다.

이제 모달창을 띄우기만 하면 되는데 조건부 연산자 ( 삼항 연산자 ) 를 이용하면 된다.

아래의 코드는 isOpen이 true일 때 컴포넌트를 보여주는 코드이며, 모달버튼을 누르면 컴포넌트가 보여 질 것이다.

{isOpen ? (
          <ModalBackdrop onClick={openModalHandler}>
            <ModalView onClick={(e) => e.stopPropagation()}>
              <FiX className="close" onClick={openModalHandler} />
              <div className="text">HELLO CODESTATES!</div>
            </ModalView>
          </ModalBackdrop>
        ) : null}

Toggle

토글은 스위치를 클릭하면, 스위치의 배경색이 변하고, 스위치 컴포넌트 내부의 원이 자연스럽게 오른쪽으로 옮겨지게끔 만들면 된다.

사용한 상태, 함수를 정리해보자.

const [isOn, setisOn] = useState(false);

isOn은 boolean값을 가지며, 스위치가 켜기면 true, 꺼지면 false를 가진다.

const toggleHandler = () => {
    setisOn(!isOn);
  };

토글의 함수도 모달과 동일한 모습을 가지고있다. 상태가 true, false 두가지이며, 클릭하면 true, false, true ... 이런식으로 변경이 되기 때문이다.

구현은 조건부 연산자를 이용하면 된다.

<div className={`toggle-container ${isOn ? "toggle--checked": null}`}/>
<div className={`toggle-circle ${isOn ? "toggle--checked": null}`} />

isOn이 true일 때 toggle--checked 클래스를 추가해주며 적용되는 스타일은 아래와 같다.

	 > .toggle-container {
    width: 70px;
    height: 33px;
    border-radius: 30px;
    background-color: #8b8b8b;
    transition: 0.3s;

    &.toggle--checked {
      background-color: var(--coz-purple-600);
      transition: 0.3s;
    }
  }

 > .toggle-circle {
    position: absolute;
    top: 4px;
    left: 6px;
    width: 25px;
    height: 24px;
    border-radius: 50%;
    background-color: #ffffff;
    transition: 0.3s;

    &.toggle--checked {
      left: 39px;
      transition: 0.3s;
    }
  }

& 를 사용하여 클래스 이름이 존재할 때 스타일이 적용되며, transition을 이용하여 부드럽게 이동되도록 하였다.

Tap

탭은 taplist를 누르면 이름, 내용이 선택된 탭에 맞게 보여지면 된다.

사용한 상태, 함수를 정리해보자

const [currentTab, setCurrentTab] = useState(0);

currentTab은 현재 선택되어있는 탭의 상태를 나타내며, menuArr라는 배열의 인덱스를 나타낸다.

ex) currentTab이 0일 때,
menuArr[currentTab] === { name: 'Tab1', content: 'Tab menu ONE' }

const menuArr = [
    { name: 'Tab1', content: 'Tab menu ONE' },
    { name: 'Tab2', content: 'Tab menu TWO' },
    { name: 'Tab3', content: 'Tab menu THREE' },
  ];
 const selectMenuHandler = (index) => {
    // TIP: parameter로 현재 선택한 인덱스 값을 전달해야 하며, 이벤트 객체(event)는 쓰지 않습니다
    // TODO : 해당 함수가 실행되면 현재 선택된 Tab Menu 가 갱신되도록 함수를 완성하세요.
    setCurrentTab(index);
  };

selectMenuHandler는 index를 인자로 받아 currentTab의 값을 변경시켜주는 함수이다.

탭리스트를 클릭하면, selectMenuHandler 함수에 index를 인자로 전달하여 실행시키면 currentTab의 상태가 변경된다.

이제 선택한 리스트를 표시하는 css , 리스트의 컨텐츠를 표시하면 된다.

className={currentTab === index ? "submenu focused" : "submenu"}
  • 위와 같이 작성하면 선택한 리스트에만 focused 클래스가 적용되며, 아래의 스타일이 적용된다. ( 배경이 변경되며, 글자색도 변경된다. )
.focused {
    ${"" /* 선택된 Tabmenu 에만 적용되는 CSS를 구현합니다.  */}
    transition: 0.3s;
    background-color: var(--coz-purple-600);
    color: white;
  }
  • 리스트의 컨텐츠는 아래의 코드로 표현했다.
<p>{menuArr[currentTab].content}</p>

Tag

태그는 입력을 하면 새로운 태그를 추가하되, 아래의 3가지 조건을 만족해야한다.

  1. 입력하려는 태그가 이미 있다면 추가 X
  2. 아무것도 입력하지 않고 Enter를 누르면 추가 x
  3. 태그가 추가되면 input창 비우기

먼저 입력창에 무언갈 입력 후, 엔터키를 눌렀을 때, onKeyUp 이벤트핸들링으로 태그가 추가되게 하는 함수를 실행시켜준다.

onKeyUp={(event) => {
            addTags(event)
          }}

event를 인자로 전달해주었다. (생략해도 된다)

const addTags = (event) => {
    if (event.target.value === "") return null; 

    if (event.key === "Enter" && tags.filter(el => el === event.target.value).length !== 1) {
      setTags([...tags, event.target.value]);
      event.target.value = "";
    }
  };

태그를 추가하는 함수 addTags이다.

첫번째 if문은 위의 조건 중 1번을 만족시킨다.

두번째 if문은 Enter키를 입력받았으며, 동시에 입력하려는 태그가 기존 tags에 없다면 기존 상태에 인풋창에 입력한 값을 추가한다.
( filter 메서드를 이용하여 중복되는 태그가 있다면 tags의 길이가 1이 되면서 false를 반환하며 추가되지 않을 것이다)

이러면 조건을 모두 만족하게 된다.


과제2

리액트 커스텀 컴포넌트 과제 테스트 케이스를 전부 통과하세요.


한가지는 기능구현은 되는데 통과가 안된다. 여러가지 방법으로 코드를 고쳐봐도 해결되지않아서 일단 제출..

profile
매일매일 발전하는 개발자를 목표로!

0개의 댓글