랜덤 색 추출로 css 컬러가이드 만들기 05

포트폴리오를 진행하다보니
예상보다 많은 기능을 추가하게 되었지만(욕심가득)
하나하나 풀어나가보자
먼저 히스토리 기능!

히스토리 기능

벨로퍼트 - 배열에 항목 추가하기

히스토리 기능은 벨로퍼티님의 글을 보고나서
전체적인 코드 수정 후 진행하기로 한다!

먼저 배열을 이용할 때는 기존 배열의 불변성을 지켜야하며
push,splice,sort등의 함수는 사용하면 안된다고 한다.
그런데 나는 다 사용 했는걸..?!

결국 불변성을 유지하기위해 코드를 정리하기로 한다.

리팩토링

(드림코딩 엘리님 사랑합니다☺️)

함수의 불변성을 유지하기위해 리팩토링하기까지
많은 고비가 있었다..
(사실 겁먹어서 3일정도 도망갔다 왔다🥹)
하지만 이젠 할수 있어!
자바스크립트가 약간 부족했나보다.

먼저! useState 초기화를 객체로 수정했다.

const [colorChange, setColorChange] = useState({ color: "ffffff" });

color의 초기값을 ffffff로 설정해서 하얀색이 먼저 보이도록!

RandomColor 컴포넌트에도 객체로 넘겨주고
<RandomColor color={colorChange.color} name="Primary" />

배경색 앞에 #을 붙여 컬러 코드로 인식되도록 했다.
  <div
     className="recommendColor"
     style={{ backgroundColor: `#${color}` }}
   ></div>

    const randomAlphabet =
      alphabet[Math.floor(Math.random() * alphabet.length)] +
      alphabet[Math.floor(Math.random() * alphabet.length)] +
      alphabet[Math.floor(Math.random() * alphabet.length)] +
      alphabet[Math.floor(Math.random() * alphabet.length)] +
      alphabet[Math.floor(Math.random() * alphabet.length)] +
      alphabet[Math.floor(Math.random() * alphabet.length)];
    setColorChange((color) => ({ ...color, color: randomAlphabet }));

그리고 set값에 스프레드 연산자를 사용해 컬러 코드를 넣고
랜덤으로 추출한 digit을 업데이트 할 수 있도록 리팩토링을 완성했다.

불변성을 유지하도록 코드를 수정했으니 다른 코드들도 같이 수정하면
금방 끝이 날 것 같다!!

히스토리 기능

const [history, setHistory] = useState({ historyID: [{ code: "ffffff" }] });

히스토리 기능은 setHistory를 하나 더 만들어 줬다.
기존의 setColorChange에 객체로 추가하려고 하니
코드가 추가가 되지 않더라던..!

const code = randomAlphabet;
setHistory((color) => ({ ...color, historyID: [{ code }, ...color.historyID] }));

같은 방법으로 스프레드 연산자를 사용해 히스토리아이디에 코드를 추가해준다.
좀전과 좀 다른곳은 배열을 사용했다는것!

<HistorySection history={history} />

히스토리섹션을 디자인할 컴포넌트를 만들어 준다음

export default function HistorySection({ history }) {
  console.log(history);
  return (
    <div className="historyFlex">
      {history.historyID.map((el, index) => (
        <div>
          <div className="historyColor" 
          key={index} 
          style={{ backgroundColor: `#${el.code}` }}></div>
        </div>
      ))}
    </div>
  );
}

props으로 넘겨주어 디자인까지 하면..!

히히 신난다
3일동안 고민하던게 한번에 해결됐넹
코딩 넘 재밌는것...🤭

남은 기능들도 마저 구현해보자!