[React] 만들어져 있는 컴포넌트 쓰기 (react-color)

01 아예 다 만들어져 있는 컴포넌트 가져다 써보기

01-1  설치

npm install react-color

 

 

 

01-2  react-color 검색

• react-color

https://casesandberg.github.io/react-color/

React Color

 

 

 

01-3  import { 옵션 } from 'react-color'

• import { CirclePicker } from 'react-color'

옵션 선택!

 

 

src

 

src/components

• src/components/Dog.js

import React, { useState } from 'react'
import { Box, Button } from './Dog-styled'
import { CirclePicker } from 'react-color'

// 8개 아무거나 채워주세요!
const myColorList = ["#F9D9D9", "#F9E8D9", "#F8F9D9", "#D9F9E8", 
                    "#D9EAF9", "#EAD9F9", "#F9D9F7", "#FFFFFF"]

function Dog(){
    const [ myColor, updateColor ] = useState("black")
    const handleClick = () => {}
    return<>
        <CirclePicker />
    </>
}

export default Dog

 

 

 

01-4  onChangeComplete

 

 

 

01-5  코딩 완성 (CirclePicker)

 

src

 

src/components

• src/components/Dog.js

import React, { useState } from 'react'
import { Box, Button } from './Dog-styled'
import { CirclePicker } from 'react-color'

// 8개 아무거나 채워주세요!
const myColorList = ["#F9D9D9", "#F9E8D9", "#F8F9D9", "#D9F9E8", 
                    "#D9EAF9", "#EAD9F9", "#F9D9F7", "#FFFFFF"]

function Dog(){
    const [ myColor, updateColor ] = useState("black")
    const handleClick = (color, event) => {
        // color.hex 가 바로 내가 선택한 색상!
        updateColor(color.hex)
    }
    return<>
        <Box backColor={myColor} />
        <CirclePicker onChangeComplete={handleClick} />
    </>
}

export default Dog

 

src

 

src/components

• src/components/Dog-style.js

// 스타일드 컴포넌트만 따로 만드는 모듈!
import styled from "styled-components";

export const Box = styled.div`
    width: 200px; height: 200px;
    background-color: ${props => props.backColor};
`

export const Button = styled.button`
    width: 100px; height: 25px;
    border: none; border-radius: 8px;
    background-color: orange; color: white;

    &:hover{
        background-color: gray;
    }
    &:active{
        font-size: 18px;
    }
`

 

src

• src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
// import App from './components/App';
// import Bag from './components/Bag';
// import Cat from './components/Cat';
import Dog from './components/Dog';

ReactDOM.render(
  <React.StrictMode>
    <Dog />
  </React.StrictMode>,
  document.getElementById('root')
);

 

 

Dog.js

Dog-styled.js

index.js

 

 

팔레트 누르는대로 색상 변경 됨!

 

 

 

01-6  다른 예제 "BlockPicker"

 

 

src

 

src/components

• src/components/Dog.js

import React, { useState } from 'react'
import { Box, Button } from './Dog-styled'
import { BlockPicker } from 'react-color'

// 8개 아무거나 채워주세요!
const myColorList = ["#F9D9D9", "#F9E8D9", "#F8F9D9", "#D9F9E8", 
                    "#D9EAF9", "#EAD9F9", "#F9D9F7", "#FFFFFF"]

function Dog(){
    const [ myColor, updateColor ] = useState("black")
    const handleClick = (color, event) => {
        // color.hex 가 바로 내가 선택한 색상!
        updateColor(color.hex)
    }
    return<>
        <Box backColor={myColor} />
        <BlockPicker onChangeComplete={handleClick}
        colors={['red', '#D9E3F0', '#F47373', '#697689', '#37D67A',
        		'#2CCCE4', '#555555', '#dce775', '#ff8a65', '#ba68c8']}
        triangle="hide"
        />
    </>
}

export default Dog

 

BlockPicker로 나옴!