[React/리액트] 색상 팔레트 프로그램 만들기 | CSS Color Names, Hex code

 

 

Input

import colorNames from 'colornames'

const Input = ({ colorValue, setColorValue, sethexValue, isDarkText, setIsDarkText }) => {
    return (
        <form onSubmit={(e) => e.preventDefault()}>
            <label>Add Color Name:</label>
            <input
                autoFocus
                type="text"
                placeholder="색상명을 입력하세요."
                required
                value={colorValue}
                onChange={(e) => {
                    setColorValue(e.target.value)
                    sethexValue(colorNames(e.target.value))
                }} />
            <button
                type="button"
                onClick={() => setIsDarkText(!isDarkText)} >
                텍스트 색 전환</button>
        </form>
    )
}

export default Input

1. Input 컴포넌트는 색상명 입력과 텍스트 색 전환을 담당한다. 

2. <form> 요소를 만든다. 폼의 제출을 막기 위해 onSubmit 핸들러에서 e.preventDefault()를 호출.

3. <label> 요소를 만든다. 입력 필드의 레이블을 제공.

4. <input> 요소를 만든다. 색상명을 입력할 수 있는 입력 필드를 생성.

• autoFocus 속성은 페이지 로딩 시 해당 입력 필드에 자동으로 포커스.
• type 속성은 "text"로 설정하여 텍스트 입력받음.
• placeholder 속성은 입력 필드에 표시되는 안내 텍스트를 제공.
• required 속성은 필수 입력 필드로 설정.
• value 속성은 colorValue 상태 변수의 값을 표시.
• onChange 핸들러는 입력 필드 값이 변경될 때마다 setColorValue로 colorValue 상태를 업데이트하고, sethexValue로 해당 색상명의 헥스 코드 값을 업데이트.

 

5. <button> 요소를 만든다.

• 텍스트 색 전환을 위한 버튼을 생성.
• type 속성을 "button"으로 설정하여 기본 폼 제출 동작을 방지.
• onClick 핸들러는 버튼 클릭 시 setIsDarkText로 isDarkText 상태를 반전시킴.

 

 

 

 

 

Square

const Square = ({ colorValue, hexValue, isDarkText }) => {
    return (
        <section
            className="square"
            style={{
                backgroundColor: colorValue,
                color: isDarkText ? "#000" : "#FFF"
            }}
        >
            <p>{colorValue ? colorValue : "없음"}</p>
            <p>{hexValue ? hexValue : null}</p>
        </section >
    )
}

Square.defaultProps = {
    colorValue: "Empty Color Value"
}

export default Square

반응형

1. Square 컴포넌트는색상 값을 받아 배경색과 텍스트 색을 설정하여 보여주는 역할. 

2. <section> 요소를 만든다. square 클래스를 가지는 섹션 요소를 생성. 사각형 모양을 표현한다.

3. style 속성을 사용하여 요소의 스타일을 설정.

• backgroundColor 속성은 colorValue에 따라 배경색을 설정.
• color 속성은 isDarkText 값에 따라 텍스트 색을 설정.
• isDarkText가 true인 경우 텍스트 색을 검은색(#000)으로, 그렇지 않은 경우 텍스트 색을 흰색(#FFF)으로 설정.

4. <p> 요소를 만든다.

• 첫 번째 단락은 colorValue 값을 표시. 만약 colorValue가 존재하지 않을 경우 "없음"을 표시.
• 두 번째 단락은 hexValue 값을 표시합니다. 만약 hexValue가 존재하지 않을 경우 아무 내용도 표시하지 않음.

5. Square 컴포넌트의 defaultProps를 설정. 기본적으로 colorValue는 "Empty Color Value"로 설정.

 

 

 

 

 

 

App.js

import Square from "./Square";
import Input from "./Input";
import { useState } from 'react'

function App() {
  const [colorValue, setColorValue] = useState('')
  const [hexValue, sethexValue] = useState('')
  const [isDarkText, setIsDarkText] = useState(true)

  return (
    <div className="App">
      <Square
        colorValue={colorValue}
        hexValue={hexValue}
        isDarkText={isDarkText} />
      <Input
        colorValue={colorValue}
        setColorValue={setColorValue}
        sethexValue={sethexValue}
        isDarkText={isDarkText}
        setIsDarkText={setIsDarkText} />
    </div>
  );
}

export default App;

 

 

quare 컴포넌트: 색상 정보를 표시하고 배경색과 텍스트 색을 설정하여 보여주는 역할.
Input 컴포넌트: 색상명을 입력하고 텍스트 색을 전환하는 기능을 제공.
useState 훅: 상태 관리를 위해 사용.

 

const [colorValue, setColorValue] = useState('')

: colorValue라는 상태 변수와 그 상태를 업데이트하는 setColorValue 함수를 정의하고, 초기값을 빈 문자열('')

const [hexValue, sethexValue] = useState('')

: hexValue라는 상태 변수와 그 상태를 업데이트하는 sethexValue 함수를 정의하고, 초기값을 빈 문자열('')

const [isDarkText, setIsDarkText] = useState(true)

: isDarkText라는 상태 변수와 그 상태를 업데이트하는 setIsDarkText 함수를 정의하고, 초기값을 true

 

<Square>

: colorValue, hexValue, isDarkText 값을 해당 컴포넌트에 전달하여 색상 정보와 텍스트 색을 표시.

<Input>

: colorValue, setColorValue, sethexValue, isDarkText, setIsDarkText 값을 해당 컴포넌트에 전달하여 색상명 입력과 텍스트 색 전환 기능을 제공.