다음 목표
랜덤으로 색상을 추출할 수 있게 되었으니
첫번째 목표인 컬러 바리에이션을 만들어 보기로 한다.
1/ 5가지의 비슷한 색상 조합
2/ 그라데이션
3/ 상관없는 색상 조합
약간의 광기어린 실험을 해봤다.
useState와 배열의 조합을 확인하기위해 무모한 짓을 해봤는데...!
(아래 코드는 없다치고 공백으로 봐주시길..ㅎㅎ)
const [colorChange, setColorChange] = useState("버튼을 눌러보세요!");
const [reSort1, setReSort1] = useState("null");
const [reSort2, setReSort2] = useState("null");
const [reSort3, setReSort3] = useState("null");
const [reSort4, setReSort4] = useState("null");
const [reSort5, setReSort5] = useState("null");
const [reSort6, setReSort6] = useState("null");
const [reSort7, setReSort7] = useState("null");
const [reSort8, setReSort8] = useState("null");
const [reSort9, setReSort9] = useState("null");
const [reSort10, setReSort10] = useState("null");
const [reSort11, setReSort11] = useState("null");
const [reSort12, setReSort12] = useState("null");
const [reSort13, setReSort13] = useState("null");
const [reSort14, setReSort14] = useState("null");
const randomColor = () => {
const resultDigit = [];
for (let i = 1; i <= 6; i++) {
const randomAlphabet =
alphabet[Math.floor(Math.random() * alphabet.length)];
resultDigit.push(randomAlphabet);
}
setColorChange(resultDigit.join(""));
//2개씩 나눠 재조합
const reSort1 = resultDigit.slice(0, 2).join("");
const reSort2 = resultDigit.slice(2, 4).join("");
const reSort3 = resultDigit.slice(4, 6).join("");
const reSorted1 = reSort1 + reSort3 + reSort2;
const reSorted2 = reSort2 + reSort1 + reSort3;
const reSorted3 = reSort2 + reSort3 + reSort1;
const reSorted4 = reSort3 + reSort1 + reSort2;
const reSorted5 = reSort3 + reSort2 + reSort1;
const reSorted6 = reSort1 + reSort1 + reSort1;
const reSorted7 = reSort2 + reSort2 + reSort2;
const reSorted8 = reSort3 + reSort3 + reSort3;
const reSorted9 = reSort1 + reSort1 + reSort2;
const reSorted10 = reSort1 + reSort1 + reSort3;
const reSorted11 = reSort2 + reSort2 + reSort1;
const reSorted12 = reSort2 + reSort2 + reSort3;
const reSorted13 = reSort3 + reSort3 + reSort1;
const reSorted14 = reSort3 + reSort3 + reSort2;
setReSort1(reSorted1);
setReSort2(reSorted2);
setReSort3(reSorted3);
setReSort4(reSorted4);
setReSort5(reSorted5);
setReSort6(reSorted6);
setReSort7(reSorted7);
setReSort8(reSorted8);
setReSort9(reSorted9);
setReSort10(reSorted10);
setReSort11(reSorted11);
setReSort12(reSorted12);
setReSort13(reSorted13);
setReSort14(reSorted14);
};
return (
<div>
<button onClick={randomColor}>컬러 체인지</button>
<RandomColor color={colorChange} />
<h1 style={{ color: `#${colorChange}` }}>
CSS HEX CODE VARIATION #{colorChange}
</h1>
<div className="flexColor">
<RandomColor color={reSort1} />
<RandomColor color={reSort2} />
<RandomColor color={reSort3} />
<RandomColor color={reSort4} />
<RandomColor color={reSort5} />
</div>
<div className="flexColor">
<RandomColor color={reSort6} />
<RandomColor color={reSort7} />
<RandomColor color={reSort8} />
</div>
<div className="flexColor">
<RandomColor color={reSort9} />
<RandomColor color={reSort10} />
<RandomColor color={reSort11} />
<RandomColor color={reSort12} />
<RandomColor color={reSort13} />
<RandomColor color={reSort14} />
</div>
</div>
);
}
배열 결과
반복되는 배열의 결과는
코드가 [a,b,c,d,e,f,g]라고 할 떼
첫번째 줄은 6자리 코드를 2개씩 3개로 나눠 차례대로 나열한 것 //[ab,cd,ef]...
두번째 줄은 3개씩 나눈 코드를 3번 반복한 것 //[ab,ab,ab]...
세번째 줄은 2번 반복 + 1번 //[ab,ab,cd]...
이렇게 컬러조합이 나왔는데..
내가 원한 결과랑은 조금 다르게 나왔다.
깔끔한 색상 조합을 원했는데
버튼을 누를때마다 색의 순서가 뒤바뀌어 버렸다.
(이것은 css컬러 조합 공부를 좀 더 해야한다는 것인데..!)
그건 그렇다고 생각하고
이렇게 선배님께 코드 제출하면
욕 밖에 먹을게 없다는건 아직 취준생인 나도 알고있다^^..😩
먼저 깔끔하게 리팩토링해서 예쁘게 조립해보자
리팩토링
사실 순열을 정확하게 알고있으면
그렇게 어려운 작업은 아니지만
복잡한 과정은 필요하지 않아서
내가 원하는 색상코드를 지정해주기로 한다.
먼저 내가 원하는 색상 조합은 그라데이션이 됐으면 한다.
디자이너하면서 얻은 짬바중 하나는
어디든 고정시키고 두개의 숫자만 올리면 된다는 것이다.
App.js
const alphabet = ["f","e","d","c","b","a",
"9","8","7","6","5","4","3","2","1","0",];
const [colorVariation, setColorVariation] = useState([]);
const colorVariationArr = [];
for (let i = 0; i <= alphabet.length; i += 3) {
const variation =
resultDigit.slice(0, 4).join("") + alphabet[i].repeat(2);
colorVariationArr.push(variation);
setColorVariation(colorVariationArr);
}
return (
<div className="flexColor">
<RandomColor color={colorVariation[0]} />
<RandomColor color={colorVariation[1]} />
<RandomColor color={colorVariation[2]} />
<RandomColor color={colorVariation[3]} />
<RandomColor color={colorVariation[4]} />
<RandomColor color={colorVariation[5]} />
</div>
);forloop를 이용해 기존 추천된 색 4자리와 알파벳 배열 증가를 이용해 색을 골라주었다.
그러니까 resultDigit=[a,b,c,d,e,f]라면
abcdff
abcdcc
abcd00
abcd33
처럼 뒷자리를 3개씩 증가시켜준 것이다.
hex digit에서 ffffff는 하얀색 000000은 검정색이라는 것을 활용한 것이다.
이것을 색상 컴포넌트에 prop으로 넘겨줘서
중복되는 코드를 깔끔하게 한다!
RandomColor.js
const RandomColor = ({ color }) => {
return (
<div>
<div
className="recommendColor"
style={{ backgroundColor: `#${color}` }}
></div>
<h1 style={{ color: `#${color}` }}>#{color}</h1>
</div>
);
};리팩토링 결과
아주 맘에 든다 깔끔하다..!
이제 남은건 랜덤색상 추천과 메인컬러, 서브컬러를 동시에 추천하는 것이다.
이정도 코드 짰으면 다음은 쉽다.
그리고 디자인까지 마무리하기!
-반응형..!
-카피기능
-기록기능
