[2022 하계 모각소] 4회차 결과

1. Recoil

 

Recoil은 Facebook에서 만든 React를 위한 상태 관리 라이브러리이다. 

Redux와 비슷하게 상태 관리가 가능한 라이브러리이지만 redux와 차이점이 있다.

Redux의 상태 관리는 기본적으로 상용구 코드(boilerplate code)가 많이 발생하는데다 combineReducer를 통한 reducer 분할이 가능하다 하더라도 Recoil의 atom과 같은 유연함은 결코 제공할 수 없다. 컴포넌트의 useMemo처럼 파생 데이터를 생성할 수 있는 기능은 자체적으로 가지고 있지 않아서 reselect같은 외부 라이브러리의 힘을 빌려야 한다. 그리고 atomEffect처럼 특정 상태가 업데이트 되었을 때 실행할 사이드 이펙트는 자체적으로 정의할 수 없으며 컴포넌트에서 상태를 구독한 후 useEffect 안에서 구현해야 한다. Redux 미들웨어는 상태 업데이트 후에 실행되는 것이 아니라 dispatch된 모든 액션이 거쳐가는 곳이라 성격이 다르다.

그리고 결정적으로 데이터 구조가 다르다. Redux의 상태 구조는 트리 형태지만 Recoil은 유향 그래프(directed graph) 형태로 구성된다. Recoil에서 데이터의 소스인 atom은 고유한 문자열 키를 가지는데, Recoil은 atom의 키를 구성하는 알파벳을 노드로 하여 그래프를 구성한다(Trie 참조). Recoil에서 atom의 키는 고유한 값을 가져야 하므로 그래프 상의 노드에는 언제나 1개의 atom만 존재하게 된다. 이는 곧 atom이 다른 atom의 영향을 받지 않는 독립적인 상태라는 말이기도 하다. Redux에서 그랬던 것처럼 reducer를 구현할 때 업데이트 대상이 아닌 값(=상태 객체의 다른 필드)들의 불변성을 보장하기 위해 immutable.js, immer 같은 라이브러리의 사용할 고려할 필요가 없다.

 

- 기본 사용법

recoil 폴더 안에 atom을 정의한다.

key는 state에 쓰일 변수명과 일치해야 한다!

import { atom } from "recoil";

export const nicknameState = atom({
	key : "nickname",
    default : "chamny",
})

보여질 페이지에서 닉네임을 볼 수 있도록 useRecoilState 사용

import { useRecoilState } from "recoil";
import { nicknameState } from "./recoil/User";

const PageA = () => {
	const [nickname, setNickname] = useRecoilState(nicknameState);

	return (
    	<input type="text" placeholder="닉네임을 입력해주세요." value={nickname} onChange={(e) => setNickname(e.target.value)}/>
        <h3>{nickname}</h3>
    );
};

export default PageA;

또 다른 페이지에서 값만 불러올 수 있다.

import { useRecoilValue } from 'recoil';

const PageB = () => {
	const nickname = useRecoilValue(nicknameState);
    
    return (
    	<div>
    		<h3> 안녕하세요! {nickname}님! </h3>
        </div>
    );
}

export default PageB;

 

 

2. styled-components

 

회원가입 페이지에 사용되는 전화번호 인증 부분에서 styled-components를 사용하였다.

 

const NumConfig = styled.div`
  text-decoration:none;
  display:inline-block;
  width:120px;
  border-radius:3px;
  font-weight:bold;
  font-size:14px;
  line-height:40px;
  text-align:center;
  outline:none;
  margin-left:5px;
  vertical-align:top;
  
  backgroundColor:#fff;

  border: ${(props) => (props.valid ? "1px solid #5f0080" : "1px solid grey")};

  color: ${(props) => (props.valid ? "#5f0080" : "grey")};
`;

border와 color 부분에서 props의 valid를 따진 후 input값의 유효성 검사를 통과하면 다른 css를 적용하도록 삼항 연산자를 사용하였다.

아래와 같이 NumConfig를 태그로 바로 사용하여 css를 적용할 수 있다.

<NumConfig valid={phonenumValid}>인증번호 받기</NumConfig>

 

*** styled-components를 시도하다가 계속 css 적용이 안돼서 오류를 찾지 못해서 오랜 시간을 허비했었는데, styled-components는 변수명의 첫 시작이 대문자여야한다고 한다. 이 실수 때문에 몇 시간을 허비했는지 모른다...

 

 

3. 반응협 웹 공부

 

- 미디어 쿼리 사용

- 레이아웃 구조가 달라질 때 / 내용물의 크기가 달라질 때

@media screen and (max-width:500px) {
  .best_title {
    font-size: 20px;
    text-align: center;
    width:500px;
  }

  .order_bar {
    width:400px; 
    display: flex;
    align-items: center;

  }
  
  .item_grid {
    grid-template-columns: repeat(1, 1fr);
  }
}