ram2 🚗

🖥️  ThemeProvider ?

지정된 디자인 시스템을 모든 코드에서 사용하기 위해서는 어떻게 해야할까 !?

그때 사용하는 것이 ThemeProvider이다.

React 컴포넌트에서 테마에 대한 정보를 제공하는 역할이라고 한다. 이를 사용하면 하위 컴포넌트에서 공통 theme을 사용할 수 있다.

색상값은 props를 통해 전달한다.

🖥️  어떻게 사용할까?

1. theme 파일을 만들고, 해당 파일에 색상을 지정한다.

다음은 내가 지정한 theme 색상이다. 

// styles/theme.js

const theme = {
  colors: {
    background: "#121212",
    text: "#ececec",
    primary: "#63e6be",
    primary2: "#62E6BE",
    white1: "#F1F3F5",
    white: "#FFFFFF",
    unSelected: "#ACACAC",
    secondBlack: "#1E1E1E",
    divider: "#2A2A2A"
  },
};

export default theme;

2. import 하기

그리고 해당 파일을 사용할 수 있도록 상단에 import 해주면 된다.

import { ThemeProvider } from "styled-components";
import theme from "../../styles/theme";

3. App.js에 사용하기

import theme from "./styles/theme";
import Router from "./router/Router";

function App() {
  return (
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <Router />
    </ThemeProvider>
  );
}

export default App;

이렇게 생성한 객체를 ThemeProvider의 props로 넣어주면 된다 !!

4. 실제 코드에서 사용하기

background-color: ${theme.colors.background};

이렇게 하면, theme 파일에 있는 색상들을 다른 파일에서도 사용할 수 있다 !!

이전에 react에서 제공하는 dropdown 라이브러리를 사용하여 커스텀 한 적이 있다.

하지만 내가 이번에 만들어야 하는 드롭다운은 해당 라이브러리를 커스텀해서는 할 수 없었다.

약 20분정도 해보고 안되니 다른 방법을 찾아보기 시작했다.

내가 하고 싶은 건, 아이콘을 눌렀을 때 드롭박스가 나오는 것이었는데 이러한 라이브러리를 찾아봤으나, 구독을 하거나 돈을 내야 사용할 수 있는 부분이었다.

고민 끝에 그냥 만들기로 했다.

대략적인 생각은 다음과 같다.

1. 아이콘 버튼을 생성한다.
2. 버튼을 클릭 했을 때 dropdown을 보여준다.
3. dropdown 컨테이너 안에 각 list에 라우터를 연결해 원하는 페이지로 이동시킨다.

1. 아이콘 버튼 생성하기

이부분은 완전한 ui 영역이기에 그냥 내가 사용한 아이콘 버튼 코드를 넣어두겠다.

<ProfileButton
          onClick={toggleDropdown}
          style={{ backgroundColor: "transparent" }}
        >
         {/*  */}
          <AccountCircleIcon
            sx={{
              fontSize: "30px",
              color: "white",
              paddingTop: "5px",
              paddingLeft: "20px",
              paddingRight: "80px",
            }}
          />
</ProfileButton>

const ProfileButton = styled.button`
  text-align: center;
  background-color: ${theme.colors.background};
  color: ${theme.colors.white1};
  border-color: transparent;
  width: 35px;
  height: 35px;
  margin-right: 130px;
`;

2. 버튼 클릭 시 dropdown 보여주기

2-1. 상태 관리

이를 하기 위해서는 상태관리를 할 수 있는 useEffect가 필요하다.

버튼이 눌렸는지, 안눌렸는지에 따라 다른 화면 상태를 보여줘야 하기 때문이다.

const [isDropdownOpen, setIsDropdownOpen] = useState(false);

이를 위해 먼저 false로 초기화 된 isDropdownOpen 이라는 상태 변수를 생성하였다.

이 변수는 dropdown이 열려 있는지, 닫혀 있는지를 나타낸다. 예상했듯, false는 닫힌 상태이고, true는 열린 상태이다.

다음으로 setIsDropdownOpen이라는 함수를 연결했는데, 이 함수를 통해 isDropdownOpen의 값을 변경할 수 있다.

const ref = useRef(null);

useRef는 나도 아직 공부를 더 해봐야 하겠지만, DOM에 직접 연결할 수 있도록 해준다고 한다. DOM에 접근해서 무엇을 얻을 수 있는지 궁금했다. 찾아보니, 어떤 입력 필드에 자동으로 포커스를 맞추거나, 어떤 요소의 크기 혹은 위치를 알아내야 할 때 사용할 수 있다.

나는 버튼을 다시 클릭하거나, 외부 바탕을 클릭하면 드롭박스가 닫히게 하고 싶었다. 

이 ref를 사용한 자세한 코드는 2-2가 될 이벤트 리스너 부분에서 더 다룰 예정이다.

const toggleDropdown = () => {
  setIsDropdownOpen(!isDropdownOpen);
};

이 코드는 함수의 dropDown이 열려 있으면 닫고, 닫혀있으면 열겠다는 의미이다.

이 함수는 아이콘을 클릭했을 때 실행해야 한다.

2-2. 이벤트 리스너

다음으로 이벤트 리스너를 추가해준다.

앞서 살짝 언급했듯이, 드롭박스 외부의 영역을 클릭하면 드롭박스가 닫히게 하고 싶기 때문이다.

useEffect(() => {
    const handleClickOutside = (event) => {
      if (ref.current && !ref.current.contains(event.target)) {
        setIsDropdownOpen(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [ref]);

정리하면, 무언가를 클릭했을 때 dropDown 외부의 것인지를 확인한다. 만약 외부의 것이라면 

ref.current.contains(event.target) 는 false가 된다.

그래서 외부라면, dropDown을 닫게 된다.

3. 드롭다운 만들고 사용하기

<DropdownContainer ref={ref}>
	{/* 아이콘 버튼 */}
        <ProfileButton
          onClick={toggleDropdown}
          style={{ backgroundColor: "transparent" }}
        >
        {/* 여기에 사용할 아이콘을 넣어준다. */}
          <AccountCircleIcon
            sx={{
              fontSize: "30px",
              color: "white",
              paddingTop: "5px",
              paddingLeft: "20px",
              paddingRight: "80px",
            }}
          />
        </ProfileButton>
        
        {/* 드롭박스가 열려 있을 때 StyledDropdown 보여주기 */}
        {isDropdownOpen && (
          <StyledDropdown>
            <ul style={{display: "flex", flexDirection: "column"}}>
              <DropdownTextStyle href="/myPage">내 벨로그</DropdownTextStyle>
              <DropdownTextStyle href="/notFound">임시 글</DropdownTextStyle>
              <DropdownTextStyle href="/notFound">읽기 목록</DropdownTextStyle>
              <DropdownTextStyle href="/notFound">설정</DropdownTextStyle>
              <DropdownTextStyle href="/notFound">로그아웃</DropdownTextStyle>
            </ul>
          </StyledDropdown>
        )}
</DropdownContainer>

이렇게 하면, 내가 원하는 드롭다운 박스를 직접 만들어 사용할 수 있다 !!

결과

-> 프로필 아이콘 선택했을 때

-> 드롭다운에 있는 메뉴 호버 시

react에서 드롭박스 버튼 만들기

어쩌다 하게 되었냐면,

최근 학교에서 방학 중 진행하는 웹 서비스 캠프에 참여하고 있다.

개발 언어, 툴 등을 자유롭게 선택할 수 있기에 나는 프론트는 리액트로 개발하겠다 결정하였다.

현재 직접 프로젝트를 기획하여 새로운 서비스를 만들 수 있고, 실제 있는 서비스를 클론할 수도 있다.

동아리를 통해 기획의 과정이 얼마나 어렵고 힘든지를 알고 있었기에 나는 클론코딩을 선택하였다.

이번 캠프에서의 목표는 다음과 같다.

웹 서비스가 만들어지는 전체적인 과정을 익히는 것. (프론트부터 서버까지)

이를 위해 Velog를 클론코딩하기로 결정하였다.

서론이 길었는데, 클론코딩을 하다보니 드롭박스를 사용해야 할 일이 있었다.

사용하기만 하면 되는 것이 아니라, 디자인도 커스텀하는 과정이 필요했다.

1. react-dropdown 설치하기

터미널에 다음 명령어를 입력하고 라이브러리를 설치해준다.

// npm으로 설치하려면 다음 명령어를 입력하면 된다.
$ npm install react-dropdown

// yarn으로 설치하려면 다음 명령어를 입력하면 된다.
$ yarn add react-dropdown

https://www.npmjs.com/package/react-dropdown

( 자세히 알고 싶다면 위 사이트 참고하기 )

2. 상단에 import 해주기

설치가 완료 되었다면, 파일 상단에 다음 코드를 입력하여 import 해준다.

설치가 잘 되었다면, 아무런 에러 없이 import가 가능하다.

import Dropdown from 'react-dropdown';
import "react-dropdown/style.css";

두 가지를 모두 import 해줘야 한다 !

이렇게 import가 잘 되었다면, 다음과 같이 코드 내에서 사용할 수 있다.

const options = [
  'one', 'two', 'three'
];
const defaultOption = options[0];
<Dropdown options={options} onChange={this._onSelect} value={defaultOption} placeholder="Select an option" />;

(위 코드는 공식 문서에 나온 예제이다 !)

3. 커스텀 하기 !!

위 이미지는 내가 커스텀해서 만든 결과물이다.

커스텀을 하지 않으면, 기본 디자인으로 보여진다.

그럼 어떻게 다음과 같이 커스텀 하였는지 하나씩 살펴보자 !!

3-1. 드롭박스 자체를 커스텀하려면,

여기에서 드롭박스 자체란, 아래와 같은 이미지이다. 즉, 박스가 열리지 않은, 아무것도 하지 않았을 때 보여지는 부분이다.

현재 내가 준 커스텀은, 배경색, 폰트 크기, 박스 border-radius, 높이, 너비가 있다.

이러한 속성들을 수정하기 위해서는 다음과 같이 하면 된다.

앗 참고로 나는 styled component를 사용하였다.

const StyledDropdown = styled(Dropdown)`
  .Dropdown-control {
    background-color: ${theme.colors.secondBlack};
    color: white;
    border-radius: 5px;
    border-color: transparent;
    width: 110px;
    height: 32px;
    font-size: 13px;
  }
`;

이렇게 .Dropdown-control을 가져와 해당 속성에 접근해 수정하면 된다.

3-2. 드롭박스를 열었을 때 보여지는 메뉴를 커스텀 하려면,

드롭박스를 클릭하여 열리는 메뉴들을 커스텀하려면 어떻게 해야할까?

이렇게 나는 메뉴의 배경 색, 폰트 크기, 폰트 색 등을 지정하였다.

드롭박스 메뉴를 커스텀 하기 위해서는 다음과 같이 하면 된다.

.Dropdown-menu {
    background-color: ${theme.colors.secondBlack};
    color: white;
    font-size: 13px;
  }

이렇게 .Dropdown-menu에 접근하여 해당 속성들을 커스텀하면 된다.

3-3. 선택된 옵션을 커스텀하려면,

내가 선택한 옵션은 다르게 보여져야 한다. 3-2에서의 사진을 보면, 내가 선택한 '이번 주'는 색상이 다르게 표시된 것을 확인할 수 있다.

이처럼 선택한 옵션에 대한 속성에 접근하기 위해서는 이렇게 하면 된다.

.Dropdown-option.is-selected {
    color: ${theme.colors.primary};
    background-color: ${theme.colors.secondBlack};
    font-size: 13px;
  }

이렇게 .Dropdown-option.is-selected에 접근하여 선택한 옵션에 대한 디자인을 커스텀할 수 있다.

3-4. 마지막으로, 나머지 옵션들을 커스텀하려면,

이 부분은 3-2 부분에서 이미 설정해주었다 생각했으나, 따로 또 해줘야 적용이 되었다.

3-2, 3-4 둘 중 하나라도 주석처리하면 이렇게 된다..

선택된 옵션이 아닌 나머지 옵션들을 커스텀하기 위해 다음과 같이 하였다.

.Dropdown-option {
    color: ${theme.colors.white};
    font-size: 13px;
  }

이렇게 .Dropdown-option에 접근하여 해당 속성들을 설정해주었다.

4. 정리하면,

이렇게 할 수 있다. 나는 styled component를 사용하였기에 이렇게 백틱 안에 넣어주었다.

const StyledDropdown = styled(Dropdown)`
  .Dropdown-control {
    background-color: ${theme.colors.secondBlack};
    color: white;
    border-radius: 5px;
    border-color: transparent;
    width: 110px;
    height: 32px;
    font-size: 13px;
  }
  .Dropdown-menu {
    background-color: ${theme.colors.secondBlack};
    color: white;
    font-size: 13px;
  }
  .Dropdown-option.is-selected {
    color: ${theme.colors.primary};
    background-color: ${theme.colors.secondBlack};
    font-size: 13px;
  }
  .Dropdown-option {
    color: ${theme.colors.white};
    font-size: 13px;
  }
`;

실제 이 스타일을 적용하기 위해서는 다음과 같이 호출하면 된다.

<StyledDropdown options={options} value={defaultOption} />

이렇게 하면 기본으로 제공해주는 dropdown을 내가 원하는 디자인대로 커스텀할 수 있다.

리엑트.. js, html, css 이 중 그 어느 것도 배운 적, 접한 적 없었지만... 굉장히 짧은 시간에 리엑트를 공부해야만 했다.

주어진 시간에 js부터 배우고, 차근차근 강의를 들으며 공부했다.

하지만.... 제대로 이해하고, 실전에 사용하기에는 자신감과 지식이 턱없이 부족했다.

이번 프로젝트를 돌아보면 거의 실전에 부딪히며 배웠던 것 같다.

그 중 리엑트로 마크다운 에디터와 뷰어 구현하는 부분을 정리해보려고 한다.

너무나 다행히 많은 사람들이 포스팅을 해두었고, 너무나 편리한 패키지가 있었기에 아주 쉽고 간단하게 사용할 수 있었다.

물론 뷰어를 하는 것에 있어 아주 오랜 시간 삽질을 했다는 것...은 잊지 못할 것 같다...하하

1. install

npm i @uiw/react-md-editor

2. import

import MDEditor from '@uiw/react-md-editor';

3. editor 사용하기

다음과 같이 사용하면 된다.

<div className="markarea">
	<div data-color-mode="light">
		<MDEditor height={865} value={mdinfo} onChange={setMD} />
	</div>
</div>

4. viewer 사용하기

사실 이 부분에서 삽질을 꽤 오래했다... 해당 패키지에 뷰어가 같이 있었는데 그걸 보지 못하고 자꾸 다른 viewer 패키지를 찾아 적용해봤던 것.... 그렇다보니 마크다운이 제대로 보여지지 않았다...

이렇게 .Markdown을 사용하고, source에 보여주고 싶은 마크다운 String을 가져오면 된다!!!

<div className="markdownDiv" data-color-mode="light" style={{padding:15}}>
	<MDEditor.Markdown
		style={{ padding: 10 }}
		source={mkdStr}
    />
</div>

이렇게 첫 웹 경험이자 리엑트 경험을 성공적으로 마무리했다!!!

많은 우여곡절이 있었지만.. 팀원들이 없었다면.......정말....난 아무것도 할 수 없었을거다...

리엑트 조금 더 친해져보자구.. 내가 잘 할게...🥹

state

props

.

.

특정 코드들이 첫 번째 component render에서만 실행되게 하자.

처음 한 번만..!!

나중에는 상태가 변해도 실행되지 않도록.

우리가 state를 변경할 때 모든 code가 다시 실행된다. 

하지만 그럴 필요가 없을 경우!! 어떻게 해야할까?

useEffect를 사용한다. 이 useEffect는 두 개의 argument를 가지는데, 첫 번째는 우리가 딱 한 번만 실행하고 싶은 코드이다.

ex) useEffect(function1, [])

두번째는 ... 마법같다....?

결국, useEffect에 대해 배웠다. 이 함수는 계속 실행되지 않도록 하는 것. 

한 번만 실행해도 되는 것들을 다루는 함수이다.

두 번째 argument는..

이럴 때 사용한다. 특정한 부분이 변했을 때만 다시 찍히도록 하고 싶은 경우!

예를 들어, 검색 창에서 문자를 검색하고, 검색 아이콘을 누른다면 같은 단어를 입력하고 그 상태에서 버튼을 여러번 클릭하면 클릭 할 때마다 상태가 변한다. 즉, 텍스트 필드는 변하지 않지만 버튼을 눌렀기 때문에 계속 찍어내는 것이다.

버튼을 누름으로써 counter가 변화할 때도 영화를 검색하고 있는 것이다.

이 때 다음과 같이 코드를 작성하면 된다.

useEffect(() => {
 console.log("SEARCH FOR", keyword); //keyword가 변화할 때만 실행된다.
}, [keyword]);

이렇게 하면 keyword가 변화할 때 코드를 실행할 거라고 react.js에게 알려주는 것이다.

우리가 두 번째 argument를 []로 비워뒀을 때 한 번만 실행됐던 이유는 비어있으므로 지켜볼 변화가 없기 때문이다.

즉, 두 번째 argument를 채우면, '해당 argument가 변화하는지 지켜봐줘' 라고 말하는 것과 같다.

복습!!!!

리엑트에서는 새로운 데이터가 들어올 때마다 UI를 refresh 한다는 특징이 있다.

그래서 우리가 직접 하지 않아도 되므로 편하다.

하지만! 한 번만 실행하고 싶은 코드가 있는 경우, 혹은 한 번만 실행해야 하는 경우! 어떻게 해야하는가!!

이 때 useEffect를 사용하면 된다.
이 함수는 두 개의 argument를 갖는데,

첫 번째 argument는 우리가 실행시키고 싶은 코드이고,

두 번째 argument는 dependencies라고 불린다. 이는 react.js가 지켜봐야 하는 것이다. 이것이 변화할 때 첫 번째 argument를 refresh 하는 것이다. 

 두 번째 argument는 array이므로 여러 개의 component를 넣어도 된다.

결론

useEffect는 원하는 state이 변할 때만 원하는 코드를 실행할 수 있다!!

react.js는 변화가 있을 때마다 refresh 하는데, useEffect를 사용해서 원하는 경우에만 refresh 할 수 있다.

[ 필수는 아니지만, 자주 쓰이는 것은 아니지만 ]

Cleanup function

이 함수는 그냥 함수인데, 우리의 component가 destroy될 때 뭔가 할 수 있도록 해주는 것이다.

Cleanup function은 따로 이 이름의 함수가 있는 것이 아니라 useEffect에서 component가 없어질 때 무언가를 return하는 것.

이는 component가 없어질 때 어떤 분석 결과를 보내고 싶은 경우 사용할 수 있다.

이를 통해 언제 component가 create 됐는지, 언제 destroy 됐는지 알 수 있다.

function Hello() {
 function byFn() {
  console.log("bye :(");
 }
 function hiFn() {
  console.log("created :)");
  return byFn; // React.js가 hiFn을 실행하고, hiFn이 파괴될 때 byFn을 실행한다.
 }
 useEffect(hiFn, []);
 return <h1>Hello</h1>;
}

물론 문자 그대로 적을 수도 있다.

function Hello() {
 useEffect(() => {
  console.log("hi :)");
  return () => console.log("bye :(");
 }, []);

 useEffect(function () {
  console.log("hi :)");
  return function() {
   console.log("bye :(");
  };
 }, []);
 return <h1>Hello</h1>;
}