개발 중인 웹 사이트의 텍스트 색상을 정하는 건 처음에는 혼란스러울 수 있습니다. 그러나 이 글을 보시면 쉽게 배우실 수 있을 거예요.

HTML에서 텍스트 색상 지정하는 방법

CSS에서 background-color 속성은 모든 것의 배경색을 설정하기에 매우 간단합니다.

페이지에서 어떤 것의 전경색을 설정하고 싶다면 어떻게 할까요? 특히 일반적인 조건에서는 배경색을 설정하고 싶지 않은 텍스트입니다.

CSS에슨 foreground-color 속성이 없기 때문에 이것을 가능하게 하는 게 color 속성입니다.

이 글에서는 색상 속성을 사용하여 텍스트의 색상을 설정하는 방법을 보여드리겠습니다. 또한 다양한 값을 사용하는 경우에 대해서도 알아보겠습니다.

색상 속성은 색상의 이름, hexadecimal, RGB, HSL 4가지 방식으로 값을 가져옵니다. 이제 각각을 살펴보겠습니다.

색상의 이름

이름에서 알 수 있듯이 색상 속성을 가져온 후 원하는 색상의 이름을 지정하여 값을 적용합니다. 이는 red, green, blue, orange, crimson, cyan 등이 될 수 있습니다. 브라우저에서 인식하는 색상의 이름은 약 147개입니다.

기본 문법은 이렇게 생겼습니다.

element {
  color: colorName;
}

<p>freeCodeCamp</p>

p {
  color: crimson;
}

Hexadecimal 컬러 (또는 Hex 컬러)

Hex 값은 총 6자로 색을 표시하는 데 사용됩니다. 숫자 기호는 파운드/숫자 기호(#)로 시작하여 0부터 9까지의 숫자, 그리고 마지막은 A부터 F까지의 문자입니다.

처음 두 개의 값은 빨간색, 다음 두 개는 초록색, 마지막 두 개는 파란색을 나타냅니다. Hex 값의 경우 사용할 수 있는 색의 음영에 제한이 없습니다.

<p>freeCodeCamp</p>

p {
  color: #dc143c;
}

RGB 컬러

RGB는 Red(빨강), Green(초록), Blue(파랑)을 의미합니다. RGB 컬러를 사용하면 빨간색, 초록색, 파랑의 정도를 지정할 수 있습니다. 세 가지 모두 0에서 255 사이의 숫자로 표현됩니다.

RGB에는 rgba라는 타입이 있는데 여기에 추가된 'a'는 알파를 의미하며, 색의 불투명도를 지정할 수 있고 0.0에서 1.0까지 선택할 수 있습니다 – 0.0은 불투명도 0%, 0.5는 불투명도 50%, 1.0은 불투명도 100%를 의미합니다.

기본 문법은 rgba(amountOfRed, amountOfGreen, amountOfBlue, alpha)입니다.

알파 값을 원하지 않으면 rgba(amountOfRed, amountOfGreen, amountOfBlue)만 쓰셔도 됩니다.

다음은 일반 RGB 값의 문법입니다.

<p>freeCodeCamp</p>

p {
  color: rgb(220, 20, 60);
}

이것은 50% (0.5) 불투명도로 작용하는 알파 값을 보여줍니다.

p {
  color: rgb(219, 20, 60, 0.5);
}

HSL 컬러

HSL은 색, 채도 및 명도를 나타냅니다. 이것은 CSS에서 텍스트(그리고 색을 사용하는 다른 모든 것)에 색을 지정하는 또 다른 방법입니다.

• Hue는 360°로 색상 바퀴를 나타냅니다. 따라서 0°는 빨간색, 120°는 초록색, 240°는 파란색입니다.
• 채도는 백분율로 표현된 색의 선명한 정도입니다. 0%는 회색 음영이고 100%는 색상 자체입니다.
• 명도는 백분율로 표현된 색의 밝고 어두운 정도입니다. 0%는 검은색, 100%는 흰색입니다.

RGB 색상과 마찬가지로 색상의 불투명도를 설정할 수 있습니다. 그래서 hsla도 있습니다.

전체 기본 문법은 hsl(colorDegree, saturationPercentage, lightnessPercentage, alpha)입니다. 알파 값을 원하지 않으면 hsl(colorDegree, saturationPercentage, lightnessPercentage)만 쓰셔도 됩니다.

<p>freeCodeCamp</p>

p {
  color: hsl(348, 83%, 47%);
}

이렇게 hsl 색상에 특정 불투명도를 적용할 수 있습니다.

p {
  color: hsla(348, 83%, 47%, 0.5);
}

반드시 색상의 이름, Hex 컬러, RGB 컬러, HSL 컬러로 색상을 지정해줘야 하나요?

CSS의 멋진 점 중 하나는 한 가지 일에도 다양한 방법이 있다는 것입니다. 텍스트에 색상을 적용하는 방법만 봐도 그렇죠.

4가지 방법으로 색상을 적용할 수 있기 때문에 어떤 것을 사용하는 게 가장 좋은지 궁금하실 겁니다.

색상의 이름을 사용하면 표현할 수 있는 범위가 제한됩니다. 빨간색, 초록색, 파란색, 노란색 혹은 다른 색상의 이름으로는 색을 변형시키는데 제약이 많고 브라우저에서 인식하는 약 147개의 정의된 색에만 접근할 수 있습니다.

Hexadecimal 컬러는 매우 역동적입니다. 이는 창의성에 목마른 개발자들 사이에서 가장 많이 사용됩니다. Hexadecimal 컬러를 사용하면 다양한 음영을 사용할 수 있고 심지어 아무도 사용하지 않은 색상을 사용할 수 있습니다.

RGB 컬러는 hex 컬러만큼 동적입니다. 0에서 255까지 빨간색, 초록색, 파란색의 정도를 지정할 수 있는 것 외에도 추가 알파 값을 사용하여 색상을 얼마나 투명하게 할 것인지 설정할 수 있습니다.

HSL은 이 중에서 가장 역동적입니다. 컬러 휠에서 0에서 360도로 정확히 원하는 색상을 지정하고, 백분율로 채도와 명도를 설정하고, 0.0에서 1.0 사이 불투명도를 설정합니다.

정말 여러분과 여러분의 상황에 따라 다르고 어느 정도로 창의적이고 구체적으로 원하는지에 따라 다릅니다.

결론

텍스트에 색상을 적용하면 방문자들이 더 매력적으로 느끼는 웹 사이트가 될 수 있습니다. 또한 올바른 색상 조합은 콘텐츠가 더 쉽게 읽히도록 도와줍니다.

이 글에서는 색상 속성과 함께 사용할 수 있는 4가지 다른 속성으로 텍스트에 색상을 적용하는 방법에 대해 알아봤습니다.

읽어주셔서 감사하고, 열심히 코딩하세요.

이 튜토리얼에서는 리액트에서 중요한 개념인 props에 관해 얘기해보겠습니다. 앱에서 데이터 흐름을 동적으로 유지하는데 어떻게 props가 사용되는지 보여드릴게요.

전제 조건

이 튜토리얼을 따라 하려면 아래 내용을 알아야 합니다.

• 리액트 앱

추가로 이미 이것들을 이해하고 있다고 가정하겠습니다.

• 리액트에서 컴포넌트란 무엇이고 어떻게 사용하는가.
• 리액트에서 ES6 특징들 사용 방법 (잘 모르시겠나요? 이 기사 를 읽어주세요.
• 리액트에서 기본적인 state 관리 방법 (어떻게 되는지 모르시겠나요? 이 기사를 읽어주세요).

리액트에서 props는 무엇일까요?

리액트에서는 하나의 컴포넌트에서 다른 컴포넌트로 데이터를 전달할 때 props를 사용합니다(부모 컴포넌트에서 자식 컴포넌트(들)로). Props는 properties를 줄인 말입니다. 앱에서 데이터 흐름을 동적으로 만들고 싶을 때 유용합니다.

저의 App.js 컴포넌트입니다.

function App() {
  return <div className="App"></div>;
}

export default App;

이제 Tool.js라는 이름의 또 다른 컴포넌트를 만들어봅시다. 이 파일은 프로덕트 디자이너가 가장 좋아하는 도구에 대한 정보를 보여줍니다. Props를 사용하지 않을 경우 코드는 이런 식으로 생겼습니다.

function Tool() {
  return (
    <div>
      <h1>My name is Ihechikara.</h1>
      <p>My favorite design tool is Figma.</p>
    </div>
  );
}
export default Tool;

App 컴포넌트에 이 컴포넌트를 가져오겠습니다. 바로 이렇게요.

import Tool from './Tool';

function App() {
  return (
    <div className="App">
      <Tool />
    </div>
  );
}

export default App;

Tool 컴포넌트가 여러 컴포넌트에 걸쳐 재사용이 가능해 여러 디자이너와 그들이 선호하는 도구를 설명한다고 가정해봅시다.

리액트를 사용하면 코드를 다시 쓰지 않아도 컴포넌트의 로직을 쉽게 가져올 수 있지만, 이 특정 컴포넌트에는 이미 하드 코드 된 데이터가 있습니다. 즉, 다른 컴포넌트를 위해 매번 해당 로직을 다시 쓰거나, 여러분이 추측했듯이 다른 컴포넌트의 데이터를 바꾸기 위해 props를 사용해야 합니다.

어떻게 작동하는지 아직 이해가 안된다면, props는 우리가 컴포넌트의 로직을 동적으로 재사용할 수 있도록 해준다고 생각해 보세요. 이 말은 컴포넌트 안의 데이터는 정적이지 않을 거라는 겁니다. 그래서 그 로직을 사용하는 다른 컴포넌트에 대해 해당 컴포넌트의 데이터를 요구사항에 맞게 수정할 수 있습니다.

리액트에서 props 사용하는 방법

이 섹션에서는, props를 사용하는 두 가지 방법을 배울 것입니다. 디스트럭쳐링(distructuring) 없이 하는 방법과 디스트럭쳐링(distructuring)으로 하는 방법입니다.

디스트럭쳐링(distructuring) 없이 props 사용하는 방법

props를 사용하려면 함수에 props를 인자로 전달해야 합니다. 일반 자바스크립트의 함수에 인자를 전달하는 것과 비슷합니다. 여기 예시가 있습니다.

function Tool(props) {
  const name = props.name;
  const tool = props.tool;
  return (
    <div>
      <h1>My name is {name}.</h1>
      <p>My favorite design tool is {tool}.</p>
    </div>
  );
}

export default Tool;

위에서 일어난 일을 하나하나 설명해드릴게요.

1단계 - Props를 인자로 전달

위 코드의 첫 번째 줄에서 전달했습니다: function Tool(props){}. 이렇게 하면 자동으로 리액트 앱의 구성 요소에서 props를 사용할 수 있습니다.

2단계 - Props를 변수로 선언

const name = props.name;
const tool = props.tool;

위에서 볼 수 있듯이, 이러한 변수는 그 안의 데이터를 props와 쓰기 때문에 일반적인 변수와는 다릅니다.

Props에 사용할 변수를 만들고 싶지 않으면, 다음과 같이 템플릿에 직접 전달할 수 있습니다: <h1> My name is {props.name} </h1>

3단계 - JSX 템플릿에 변수 사용

변수를 선언했으므로 코드에서 원하는 위치에 변수를 사용할 수 있습니다.

return (
  <div>
    <h1>My name is {name}.</h1>
    <p>My favorite design tool is {tool}.</p>
  </div>
);

4단계 - App 컴포넌트의 props에 데이터 전달

Props 만들기가 끝났기 때문에 다음 단계는 그들에게 데이터를 전달하는 것입니다. 우리는 이미 Tool 컴포넌트를 가져왔으며 현재 브라우저에 표시되고 있습니다.

My name is .
My favorite design tool is .

선언 시 props에 기본 데이터를 생성하여 변수가 비어있지 않게 표시 할 수 있습니다. 마지막 섹션에서 이 작업을 수행하는 방법을 확인할 수 있습니다.

이것이 App 컴포넌트의 현재 상태임을 기억하세요.

import Tool from './Tool';

function App() {
  return (
    <div className="App">
      <Tool />
    </div>
  );
}

export default App;

데이터가 정확히 어디로 전달되는지 궁금하시겠죠. 이렇게 하려면 속성처럼 데이터를 전달합니다. 이렇게 생겼죠.

import Tool from './Tool';

function App() {
  return (
    <div className="App">
      <Tool name="Ihechikara" tool="Figma" />
    </div>
  );
}

export default App;

변화를 눈치채셨나요? 여기 <Tool/>에서 <Tool name="Ihechikara" tool="Figma"/>까지. 이러한 속성은 Tool 컴포넌트에 생성된 props에 붙기 때문에 오류가 발생하지 않습니다.

브라우저에 이렇게 표시되어야 합니다.

My name is Ihechikara.
My favorite design tool is Figma.

변수명은 props 자체가 아닙니다. 이런 식으로 const myPropName = props.name 식으로 변수를 만들고 템플릿에 변수를 <h1>My name is {myPropName}.</h1>라고 썼다면, <Tool name="Ihechikara" tool="Figma"/> 할 경우 코드는 완벽히 작동할 겁니다. name 속성은 prop을 포함한 변수명에서 오는 게 아닌 props.name으로 부터 오는 겁니다.

이제 Tool 컴포넌트에 정의된 로직을 사용하여 모든 컴포넌트에 대한 데이트를 동적으로 생성할 수 있습니다. 여러분은 원하는 만큼 props를 선언할 수 있습니다.

다음으로 여러분은 어떻게 디스트럭쳐링(distructuring)으로 props를 사용하는지 배우게 될 겁니다.

디스트럭쳐링(distructuring)으로 props 사용하기

이 섹션의 코드는 props를 선언하는 방법 외에 지난 섹션과 완전히 동일합니다. 자바스크립트에서 디스트럭쳐링(distructuring)을 잘 모르신다면 이 기사를 확인해주세요.

지난 섹션에서는 이런 식으로 props를 선언했습니다.

const name = props.name;
const tool = props.tool;

디스트럭쳐링(distructuring)을 하면 이럴 필요가 없습니다. 간단히 이렇게 하면 되죠.

function Tool({ name, tool }) {
  return (
    <div>
      <h1>My name is {name}.</h1>
      <p>My favorite design tool is {tool}.</p>
    </div>
  );
}

export default Tool;

코드의 첫 번째 줄에 차이점이 있습니다. props를 인자로 전달하는 대신 변수를 분해하여 함수의 인자로 전달했습니다.

나머지는 같습니다.

Props로 단일 변수뿐만 아니라 함수와 오브젝트의 데이터도 동일하게 전달할 수 있습니다.

Props에 기본값 설정하는 방법

Props를 만들 때 빈값으로 두고 싶지 않다면 기본값을 전달할 수 있습니다. 방법은 이렇습니다.

function Tool({ name, tool }) {
  return (
    <div>
      <h1>My name is {name}.</h1>
      <p>My favorite design tool is {tool}.</p>
    </div>
  );
}

Tool.defaultProps = {
  name: 'Designer',
  tool: 'Adobe XD',
};
export default Tool;

컴포넌트를 내보내기 전 코드 끝부분에 props에 대한 기본값을 선언했습니다. 이를 위해 컴포넌트의 이름과 리액트 앱을 만들때 기본으로 제공되는 defaultProps를 연결하는 점으로 시작했습니다.

이제 이 컴포넌트를 가져올 때마다 해당값이 공백이 아닌 초기값이 됩니다. 이전 섹션에서와 같이 자식 컴포넌트에 데이터를 전달하면 기본값으로 재정의됩니다.

결론

이 기사에서는 props를 사용할 때 필요한 모든 것과 컴포넌트 간에 데이터를 동적으로 전달하는 방법에 대해 다뤘습니다.

이러한 개념을 이해하는 가장 좋은 방법은 직접 실습하고 멋진 결과물을 만들어 보는 것이니, 읽는데 그치지 말고 직접 만들어 보세요.

트위터에서 저를 찾으실 수 있어요@ihechikara2. 해피 코딩하세요!

필터 컴포넌트는 사용자가 필요한 결과를 빠르고 쉽게 찾을 수 있게 도와주기 때문에 웹사이트에서 유용합니다.

특히 API에서 데이터가 올 때 아주 유용한데, 사용자는 당신의 앱이 제공하는 모든 것을 살펴볼 수는 없기 때문입니다.

이 아티클에서는 Data.js라는 별도의 컴포넌트에 배열처럼 하드 코딩하고 저장한 가짜 데이터를 사용할 겁니다.

여기서 다룰 내용

1. 시작하기
2. 리액트 앱 만들기
3. Hook을 사용해서 Data.js로부터 데이터 가져오기
4. 앱의 UI 작업하기
5. 필터 컴포넌트 만들기
6. 마무리하기

시작하기

이 특정 프로젝트를 위해 아래 코드에서 보이듯 몇 가지의 key-value 쌍으로 이루어진 가짜 음식 데이터를 사용할 겁니다.

const Data = [
  {
    id: '1',
    title: 'Poha',
    category: 'Breakfast',
    price: '$1',
    img: 'https://c.ndtvimg.com/2021-08/loudr2go_aloo-poha_625x300_05_August_21.jpg?im=FeatureCrop,algorithm=dnn,width=620,height=350',
    desc: ' Poha. Light, filling and easy to make, poha is one famous breakfast that is eaten almost everywhere in the country. And the best part is- it can be made in a number of ways. Kanda poha, soya poha, Indori poha, Nagpur Tari Poha are a few examples',
  },
  {
    id: '2',
    title: 'Upma',
    category: 'Breakfast',
    price: '$1',
    img: 'https://c.ndtvimg.com/2021-04/37hi8sl_rava-upma_625x300_17_April_21.jpg?im=FeatureCrop,algorithm=dnn,width=620,height=350',
    desc: ' A quintessential South Indian Breakfast! Made with protein-packed urad dal and semolina followed by crunchy veggies and curd, this recipe makes for a hearty morning meal. With some grated coconut on top, it gives a beautiful south-Indian flavour.',
  },
  {
    id: '3',
    title: 'Cheela',
    category: 'Breakfast',
    price: '$1',
    img: 'https://c.ndtvimg.com/2019-05/1afu8vt8_weight-loss-friendly-breakfast-paneer-besan-chilla_625x300_25_May_19.jpg?im=FaceCrop,algorithm=dnn,width=620,height=350',
    desc: 'A staple across Indian households, moong dal is widely used in a number of Indian delicacies. One such delicacy is moong dal cheela. You can also add paneer to this recipe to amp up the nutritional value and make it, even more, protein-dense',
  },
  {
    id: '4',
    title: 'Channa Kulcha',
    category: 'Lunch',
    price: '$1',
    img: 'https://i.ndtvimg.com/i/2015-04/chana-kulcha_625x350_41429707001.jpg',
    desc: 'A classic dish that never goes out of style. The quintessential chana kulcha  needs only a few ingredients - cumin powder, ginger, coriander powder, carom powder, and some mango powder, which is what gives the chana its sour and tangy taste.',
  },
  {
    id: '5',
    title: 'Egg Curry',
    category: 'Lunch',
    price: '$1',
    img: 'https://i.ndtvimg.com/i/2017-11/goan-egg-curry_620x350_41511515276.jpg',
    desc: 'Eggs are a versatile food that can be cooked for any meal of the day. From breakfast to dinner, it can be a go-to food. Here is a mildly-spiced egg curry made with garlic, onions, a whole lot of kasuri methi, fresh cream, yogurt, and fresh coriander.',
  },
  {
    id: '6',
    title: 'Paneer Aachari',
    category: 'Lunch',
    price: '$1',
    img: 'https://i.ndtvimg.com/i/2015-04/paneer_625x350_61429707960.jpg',
    desc: "Don't get intimidated by the list of ingredients because not only are already in your kitchen cabinet, but also because all they'll need is 20 minutes of your time. Chunks of cottage cheese cooked in some exciting spices, yogurt and a pinch of sugar.",
  },
  {
    id: '7',
    title: 'Fish Fry',
    category: 'Dinner',
    price: '$1',
    img: 'https://i.ndtvimg.com/i/2015-06/indian-dinner_625x350_41434360207.jpg',
    desc: 'Get your daily dose of perfect protein. Pieces of surmai fish marinated in garlic, cumin, fennel, curry leaves, and tomatoes are pan-fried in refined oil and served hot. This fish fry recipe has a host of delectable spices used for marination giving it a unique touch.',
  },
  {
    id: '8',
    title: 'Dum Alloo',
    category: 'Dinner',
    price: '$1',
    img: 'https://i.ndtvimg.com/i/2015-06/indian-dinner_625x350_51434362664.jpg',
    desc: 'Your family will thank you for this fantastic bowl of dum aloo cooked Lakhnawi style. Take some potatoes, crumbled paneer, kasuri methi, butter, onions, and some ghee.',
  },
  {
    id: '9',
    title: 'Malai Kofta',
    category: 'Dinner',
    price: '$1',
    img: 'https://i.ndtvimg.com/i/2017-10/makhmali-kofte_620x350_51508918483.jpg',
    desc: 'A rich gravy made of khus khus, coconut and milk that tastes best with koftas made from khoya. This velvety and creamy recipe will leave you licking your fingers. Makhmali kofte can be your go-to dish for dinner parties as this is quite different from other kofta recipes and extremely delicious.',
  },
  {
    id: '10',
    title: 'Malai Kofta',
    category: 'Snaks',
    price: '$1',
    img: 'https://i.ndtvimg.com/i/2017-10/makhmali-kofte_620x350_51508918483.jpg',
    desc: 'A rich gravy made of khus khus, coconut and milk that tastes best with koftas made from khoya. This velvety and creamy recipe will leave you licking your fingers. Makhmali kofte can be your go-to dish for dinner parties as this is quite different from other kofta recipes and extremely delicious.',
  },
];

export default Data;

이러한 key-value 중에는 결과를 필터링할 때 쓰일 카테고리도 있습니다.

앱을 스타일링하기 위해 이 프로젝트의 CDN으로 부트스트랩(Bootstrap)을 사용할 겁니다.

이 튜토리얼 이후에는 리액트에 컴포넌트를 가져오는 방법, 데이터를 동적으로 사용하는 방법, 그리고 가장 중요한 부모 자식 컴포넌트 사이에 props를 전달하고 사용하는 방법에 대해 더 많이 알게 되실 겁니다.

리액트 컴포넌트 만드는 방법

리액트 앱을 만드는 건 정말 쉽습니다. 본인이 선호하는 IDE의 작업 디렉토리로 가서 터미널에 아래의 명령어를 입력하면 됩니다.

npx create-react-app react-filter-app

create-react-app 프로젝트를 만드는 방법을 잘 모르겠다면 create-react-app-dev의 공식 가이드를 참고하셔도 됩니다.

세팅을 마친 후 리액트 앱이 호스팅 될 localhost:3000를 시작하기 위해서 같은 터미널에 npm start를 실행합시다. 모든 변화는 여기서 확인할 수 있습니다.

Hook을 사용해서 Data.js로부터 데이터를 가져오는 방법

이제 리액트 프로젝트를 성공적으로 설정했으므로 Data.js에서 데이터를 가져와 UI에 사용할 차례입니다.

이를 위해 먼저 App.js 컴포넌트에 데이터를 가져온 다음 useState 훅을 사용하여 데이터 상태를 관리해야 합니다.

import React, { useState } from 'react';
import Data from './Data';
import Card from './Card';

const App = () => {
  const [item, setItem] = useState(Data);
  return (
    <>
      <div className="container-fluid">
        <div className="row">
          <h1 className="col-12 text-center my-3 fw-bold">Our Menu</h1>
          <Card item={item} /> // UI Component
        </div>
      </div>
    </>
  );
};

export default App;

앱의 UI 부분을 구축하는 방법

이제 앱에서 자유롭게 사용할 수 있는 변수에 데이터를 저장하고 UI에서 작업할 수 있습니다.

UI는 map 함수를 사용하여 동적으로 만들 부트스트랩 카드가 포함됩니다.

우리는 카드를 위해 다른 컴포넌트를 만들 겁니다. 위의 코드에서 볼 수 있듯이 우리는 Card.js라고 이름을 지었고 가져왔습니다. 또한, 카드 컴포넌트 안의 item에 저장된 데이터를 사용하기 위해 item을 props로 전달했습니다.

이 컴포넌트에서는 map 함수를 이용해 앱에서 동적으로 보여줄 모든 카드와 데이터를 포함할 겁니다.

import React from 'react';

const Card = ({ item }) => {
  // destructuring props
  return (
    <>
      <div className="container-fluid">
        <div className="row justify-content-center">
          {item.map((Val) => {
            return (
              <div
                className="col-md-4 col-sm-6 card my-3 py-3 border-0"
                key={Val.id}
              >
                <div className="card-img-top text-center">
                  <img src={Val.img} alt={Val.title} className="photo w-75" />
                </div>
                <div className="card-body">
                  <div className="card-title fw-bold fs-4">
                    {Val.title} &nbsp;&nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;
                    {Val.price}
                  </div>
                  <div className="card-text">{Val.desc}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </>
  );
};

export default Card;

10개의 카드가 있는 앱의 모습은 다음과 같습니다.

필터 컴포넌트를 만드는 방법

필터 컴포넌트를 사용하여 사용자가 검색 결과를 통해 얻은 데이터를 필터링할 수 있는 방법은 다양합니다. 하지만 여기서는 아침, 점심, 저녁 그리고 간식 같은 음식의 카테고리에 따라 데이터가 필터링 되도록 버튼을 만들 겁니다.

키 카테고리의 값만 포함하는 새로운 배열을 만들고 map 메소드로 보여줘야 합니다.

// spread operator는 데이터 카테고리 섹션의 모든 값을 보여줍니다. 하지만 Set은 각 종류의 단일 값만 표시할 수 있습니다.

const menuItems = [...new Set(Data.map((Val) => Val.category))];

위의 배열을 표시하여 얻은 모든 값이 동일한 UI를 갖고 10개의 카테고리를 모두 버튼으로 보여주기 위해 spread operator를 사용합니다.

Set() 값을 사용하여 고유한 3개 또는 4개의 값만 표시하고 반복되는 값이 없도록 합니다.

map 메소드를 사용하여 동적으로 표시되는 버튼에 대한 새 컴포넌트를 만듭니다. 그러나 이번에는 새로 구성된 배열을 사용할 것입니다. 모든 카테고리가 배열에 저장되어 있고 **Set()**으로 인해 한 번만 표시되기 때문입니다.

import React from 'react';
import Data from './Data';

const Buttons = ({ setItem, menuItems }) => {
  return (
    <>
      <div className="d-flex justify-content-center">
        {menuItems.map((Val, id) => {
          return (
            <button
              className="btn-dark text-white p-1 px-2 mx-5 btn fw-bold"
              key={id}
            >
              {Val}
            </button>
          );
        })}
        <button
          className="btn-dark text-white p-1 px-3 mx-5 fw-bold btn"
          onClick={() => setItem(Data)}
        >
          All
        </button>
      </div>
    </>
  );
};

export default Buttons;

버튼을 표시할 위치에 버튼 컴포넌트를 놓으세요. 우리의 경우 app.js의 카드 컴포넌트 위에 버튼을 놓았습니다.

카테고리에 따라 필터가 되도록 버튼에 필터를 추가할 시간입니다.

const filterItem = (curcat) => {
  const newItem = Data.filter((newVal) => {
    return newVal.category === curcat;
    // comparing category for displaying data
  });
  setItem(newItem);
};

filter 메소드는 오브젝트의 카테고리에 따라 데이터를 필터합니다.

onClick() 이벤트 헨들러를 사용하면 버튼에 이 필터를 연결할 수 있습니다.

import React from 'react';
import Data from './Data';

const Buttons = ({ filterItem, setItem, menuItems }) => {
  return (
    <>
      <div className="d-flex justify-content-center">
        {menuItems.map((Val, id) => {
          return (
            <button
              className="btn-dark text-white p-1 px-2 mx-5 btn fw-bold"
              onClick={() => filterItem(Val)}
              key={id}
            >
              {Val}
            </button>
          );
        })}
        <button
          className="btn-dark text-white p-1 px-3 mx-5 fw-bold btn"
          onClick={() => setItem(Data)}
        >
          All
        </button>
      </div>
    </>
  );
};

export default Buttons;

마무리하기

사용자가 시간 낭비를 줄이고 앱에서 원하는 결과를 찾을 수 있도록 다양한 방법으로 필터 컴포넌트를 사용할 수 있습니다.

이 앱에서 배열에는 10개의 오브젝트만 있었지만 주로 API에서 데이터를 얻을 때는 수많은 데이터가 있습니다. 이럴 경우에는 한 번의 검색으로 정확한 결과를 얻기가 쉽지 않기 때문에 필터를 사용합니다.

여러분은 깃헙 레포에서 전체 코드를 보실 수 있고, 앱의 라이브 링크에서 이 필터 버튼들이 어떻게 작동하는지를 확인할 수 있습니다.

저의 다른 프로젝트들도 확인할 수 있습니다.

1. 훅을 사용해서 Pagination 컴포넌트 만드는 방법
2. 훅을 사용해서 리액트로 사전 앱 만드는 방법
3. 커스텀 도메인으로 깃헙 페이지에 리액트 앱 호스팅하는 방법

apt-package manager를 사용하여 최신 버전의 노드를 설치하려고 하면 v10.19.0이 설치됩니다. 이것은 ubuntu 앱스토어의 최신 버전이지만, NodeJS의 최신 버전은 아닙니다.

새로운 버전의 소프트웨어가 출시될 때, Ubuntu 팀이 테스트하고 공식 Ubuntu 스토어에 배포하는데 수개월이 걸릴 수 있기 때문입니다. 따라서 소프트웨어의 최신 버전을 받으려면 개발자가 게시한 비공개 패키지를 사용해야 할 수도 있습니다.

이 튜토리얼에서는 Node의 v12.18.1(LTS - 장기 지원 포함) 또는 v14.4를 설치하려고 합니다. 최신 버전을 설치하려면 nodesource 또는 nvm(노드 버전 관리자)을 사용할 수 있습니다. 두 가지 쓰는 법을 모두 보여드릴게요.

여기서 모든 명령은 Ubuntu CLI/터미널을 사용하여 실행됩니다.

NVM 사용하기 - 제가 선호하는 방법

저는 nvm을 좋아합니다. 왜냐하면 여러 프로젝트에 다른 노드 버전을 사용할 수 있기 때문입니다. 가끔 다른 버전의 노드를 사용하는 누군가와 협업하게 될 수 있고 프로젝트가 요구하는 노드 버전으로 전환해야 합니다. 이럴 때 nvm이 최고의 도구입니다.

NVM 설치

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

nvm이 설치되었는지 확인하기 위해서 nvm --version을 쳐봅시다. 0.35.3 같은 버전 숫자가 나온다면, nvm이 성공적으로 설치된 겁니다.
변경 내용을 적용하려면 터미널을 다시 시작하세요.

NodeJS 설치

다음으로 Nodejs 14.4 버전을 설치해봅시다.
간단하게 nvm install 14.4.0를 실행해보세요.
nvm install 12.18.1 같은 명령어를 사용해서 원하는 버전의 노드를 설치할 수 있습니다.
이 명령어는 자동으로 nodejs를 설치하고 'v6.14.5'인 최신 npm 버전도 설치합니다.
만약 노드 버전을 바꿔야 한다면, nvm use <version-number>을 실행하면 됩니다. 예를 들면 nvm use v12.18.1..
nvm과 함께 설치한 다양한 노드 버전을 열거하려면 nvm ls을 실행하세요.

Nodesource 설치

아래 명령을 실행하여 Nodesource에서 Nodejs 패키지를 설치할 것임을 Ubuntu에 알립니다.

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

NB v14.4.0는 노드의 최신 버전이지만 현재 LTS(장기지원)이 제공되지 않습니다. LTS로 Node의 최신 버전을 설치하고 싶다면, dnl 명령어에서 14를 12로 바꾸세요.
root 유저의 비밀번호를 입력하라는 말이 나올 수 있습니다. 입력 후 enter/return를 누르세요.

NodeJS 설치

Nodesource 세팅이 끝나면, 이제 Nodejs v14.4 설치를 할 수 있습니다.
sudo apt-get install -y nodejs를 실행하세요.
완료되면, 최신 버전의 Node가 설치되었는지 확인할 수 있습니다. 간단하게 터미널에 nodejs -v를 쳐보세요. v14.4.0이 나와야 합니다.
이 시점에서 npm이 자동으로 설치되어 있어야 합니다. 어떤 npm 버전이 있는지 확인하려면 npm version을 실행하세요. npm의 최신 버전인 6.14.5를 포함한 오브젝트가 안 나온다면, { npm: '6.14.5' }, 아래 명령어를 사용해 npm을 수동으로 업데이트 할 수 있습니다.

npm install -g npm@latest

npm이 설치되지 않아 업데이트할 수 없는 이슈가 뜬다면, sudo apt-get install -y npm를 사용해서 npm을 먼저 설치한 다음 위의 명령어로 업데이트할 수 있습니다.
특정 npm 패키지를 실행하려면 아래 명령도 실행해야 합니다.

sudo apt install build-essential

이게 다예요!
여러분은 여러분의 Ubuntu 컴퓨터에 최신 버전의 NodeJS와 NPM을 설치했습니다.
이제 멋진 제품들을 만들러 가보세요 :)

여러분은 사용자가 원하는 값을 선택할 수 있도록 HTML select 태그를 이용해서 드롭다운 메뉴를 만듭니다. 이는 서버로 전송할 데이터를 수집하는 데 중요한 기능입니다.

select 태그는 보통 form 요소 안에 들어가며, 선택 항목은 또 다른 태그인 <option>에서 코드화됩니다. 또한 독립적인 요소로도 쓸 수 있는데, 이 요소는 여전히 특수 속성 중 하나인 form과 연관되어 있습니다.

이 튜토리얼에서는 select 태그로 여러분의 코딩 프로젝트에서 데이터를 수집할 수 있게 드롭다운 메뉴를 만드는 방법을 알려드립니다. select 태그는 스타일링이 어렵기로 악명이 높기 때문에 스타일링하는 방법도 가르쳐드릴 겁니다.

Select 태그의 속성

select 태그로 드롭다운 메뉴를 만드는 방법을 자세히 살펴보기 전에, select 태그가 가진 속성들에 대해 알아봐야 합니다.

속성은 다음과 같습니다.

• name: 데이터가 서버에 제출된 후 데이터를 참조하는 데 사용되므로 모든 form 컨트롤에 name을 넣어야 합니다.
• multiple: 이 속성은 사용자가 드롭다운 메뉴에서 여러 옵션을 선택할 수 있도록 합니다.
• required: 이 속성은 일반적으로 유효성 검사를 위해 사용됩니다. 이 속성을 통해, 사용자가 드롭다운 메뉴에서 하나 이상의 옵션을 선택하지 않으면 form이 제출되지 않습니다.
• disabled: 사용자가 옵션을 선택할 수 없도록 합니다.
• size: 이 속성은 숫자로 표현되며, 한 번에 표시되는 옵션 수를 정하는데 사용됩니다.
• autofocus: 이 속성은 페이지가 로드 될 때 포커스가 있어야 할 입력 요소를 지정합니다. select를 포함한 모든 form 요소들에 사용될 수 있습니다.

Select 태그를 사용하여 드롭다운 메뉴를 만드는 방법

select 태그로 드롭다운 메뉴를 만들려면, 먼저 form 요소가 필요합니다. 왜냐하면 서버에 데이터를 제출할 submit 버튼이 form 요소 안에 있기 때문입니다.

<form action="#">
  <label for="lang">Language</label>
  <select name="languages" id="lang">
    <option value="javascript">JavaScript</option>
    <option value="php">PHP</option>
    <option value="java">Java</option>
    <option value="golang">Golang</option>
    <option value="python">Python</option>
    <option value="c#">C#</option>
    <option value="C++">C++</option>
    <option value="erlang">Erlang</option>
  </select>
  <input type="submit" value="Submit" />
</form>

드롭다운과 버튼을 중앙에 놓고, body에 밝은 회색 배경을 주기 위해 몇 가지 간단한 CSS를 추가했습니다.

body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  height: 100vh;
  background-color: #f1f1f1;
}
input {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

접근성을 높이기 위해서, select 박스를 label 요소에 붙일 수도 있습니다. 그러면 label 텍스트가 클릭 될 때 포커스가 됩니다.

아래의 코드와 같이 하실 수 있습니다.

<form action="#">
  <label for="lang">Language</label>
  <select name="languages" id="lang">
    <option value="javascript">JavaScript</option>
    <option value="php">PHP</option>
    <option value="java">Java</option>
    <option value="golang">Golang</option>
    <option value="python">Python</option>
    <option value="c#">C#</option>
    <option value="C++">C++</option>
    <option value="erlang">Erlang</option>
  </select>
  <input type="submit" value="Submit" />
</form>

저는 action 속성의 값으로 숫자 기호(#)를 넣었습니다. 이렇게 하면 submit 버튼을 눌렀을 때 404 에러가 나오지 않습니다.

하지만 이제 CSS를 약간 수정 해야 합니다.

body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  height: 100vh;
  background-color: #f1f1f1;
}
input {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
label {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
select {
  margin-bottom: 10px;
  margin-top: 10px;
}

마침내, 결과가 나왔습니다.

저기서 끝이 아닙니다. 드롭다운 항목 중 하나가 기본값으로 보이고 있으며, 페이지에 도착한 사용자가 그냥 submit 버튼을 누른다면 바로 이 항목이 선택될 겁니다.

하지만 이건 좋은 사용자 경험이 아닙니다. 여러분은 드롭다운의 첫 번째를 “select a language”로 코딩해서 이를 방지할 수 있습니다.

<form action="#">
  <label for="lang">Language</label>
  <select name="languages" id="lang">
    <option value="select">Select a language</option>
    <option value="javascript">JavaScript</option>
    <option value="php">PHP</option>
    <option value="java">Java</option>
    <option value="golang">Golang</option>
    <option value="python">Python</option>
    <option value="c#">C#</option>
    <option value="C++">C++</option>
    <option value="erlang">Erlang</option>
  </select>
  <input type="submit" value="Submit" />
</form>

사용자가 select 박스를 클릭하여 항목을 선택할 때, 드롭다운이 submit 버튼도 가립니다- 좋은 사용자 환경에 부정적인 영향을 미치는 또 다른 요소입니다.

여러분은 크기 속성으로 이 부분을 바꿀 수 있습니다. 이 속성은 기본적으로 특정 항목의 개수를 보여주고 드롭다운의 다른 항목들을 위해 스크롤을 보여줄 겁니다.

또한 일부 항목들은 사용자들에게 자동으로 보여지기 때문에 가짜 첫 번째 항목을 제거할 수 있도록 해줍니다.

<form action="#">
  <label for="lang">Language</label>
  <select name="languages" id="lang" size="4">
    <option value="javascript">JavaScript</option>
    <option value="php">PHP</option>
    <option value="java">Java</option>
    <option value="golang">Golang</option>
    <option value="python">Python</option>
    <option value="c#">C#</option>
    <option value="C++">C++</option>
    <option value="erlang">Erlang</option>
  </select>
  <input type="submit" value="Submit" />
</form>

multiple 속성으로 사용자가 드롭다운 메뉴에서 여러 항목을 선택할 수 있도록 할 수 있습니다.

<form action="#">
  <label for="lang">Language</label>
  <select name="languages" id="lang" multiple>
    <option value="javascript">JavaScript</option>
    <option value="php">PHP</option>
    <option value="java">Java</option>
    <option value="golang">Golang</option>
    <option value="python">Python</option>
    <option value="c#">C#</option>
    <option value="C++">C++</option>
    <option value="erlang">Erlang</option>
  </select>
  <input type="submit" value="Submit" />
</form>

이렇게 하면 기본적으로 4개의 항목이 표시됩니다. 여러 항목을 선택하기 위해서는 사용자가 Shift 또는 Ctrl 키를 누른 상태에서 마우스로 선택해야 합니다.

select와 <option> 태그로 할 수 있는 작업은 이뿐만이 아닙니다. <select> 태그 안에 <optgroup> 요소를 넣어 다층 선택 박스도 만들 수 있습니다.

이미 만든 드롭다운을 다음과 같이 다층 선택 상자로 변환할 수 있습니다.

<form action="#">
  <label for="lang">Language</label>
  <select name="languages" id="lang">
    <optgroup label="first-choice">
      <option value="select">Select a language</option>
      <option value="javascript">JavaScript</option>
      <option value="php">PHP</option>
      <option value="java">Java</option>
      <option value="golang">Golang</option>
    </optgroup>
    <optgroup label="second-choice">
      <option value="python">Python</option>
      <option value="c#">C#</option>
      <option value="C++">C++</option>
      <option value="erlang">Erlang</option>
    </optgroup>
  </select>
  <input type="submit" value="Submit" />
</form>

Select 요소 스타일 하는 방법

select 요소를 스타일링하는 건 가끔 혼란스럽고 브라우저 안에서 일관성이 없게 만듭니다. 그러나 언제든 다음처럼 시도해볼 수 있습니다:

<form action="#">
  <label for="lang">Language</label>
  <select name="languages" id="lang">
    <option value="select">Select a Language</option>
    <option value="javascript">JavaScript</option>
    <option value="php">PHP</option>
    <option value="java">Java</option>
    <option value="golang">Golang</option>
    <option value="python">Python</option>
    <option value="c#">C#</option>
    <option value="C++">C++</option>
    <option value="erlang">Erlang</option>
  </select>
  <input type="submit" value="Submit" />
</form>

select {
  margin-bottom: 10px;
  margin-top: 10px;
  font-family: cursive, sans-serif;
  outline: 0;
  background: #2ecc71;
  color: #fff;
  border: 1px solid crimson;
  padding: 4px;
  border-radius: 9px;
}

저는 위의 CSS 코드에서 select 박스의 텍스트에 다음과 같은 모습을 주었습니다.

• cursive 글꼴과 white 글자 색,
• 포커스 될 때 생기는 못생긴 아웃라인을 없애기 위해 outline에 0,
• 초록빛을 띤 배경,
• 1 px 두께의 진홍색 테두리,
• 모든 면의 약간 둥근 테두리를 위한 border-radius 4 px,
• 그리고 약간의 공백을 위한 padding 4 px.

이제 select 박스가 훨씬 나아 보이네요.

결론

select 태그는 HTML 안에 드롭다운과 콤보 리스트를 만들 때 정말 유용해요. 마치 라디오 버튼과 체크 박스가 하나의 패키지에 들어있는 거 같아요.

라디오 버튼으로는 리스트에서 하나의 항목만 선택할 수 있다는 거 기억하세요 - 그런데 체크박스로는 여러 항목을 선택할 수 있답니다. select는 하나의 항목 또는 여러 항목을 선택할 수 있게 설정할 수 있어 더 유연해요.

select 태그의 단 한 가지 문제점은 스타일링 하기가 무척 까다롭다는 거예요. 합리적인 해결방안은 훌륭한 유틸리티 클래스를 제공 select 요소와 form을 스타일링 할 수 있게 해주는 CSS 라이브러리를 사용하는 거예요.

이 튜토리얼을 통해 select 태그가 익숙해져 여러분의 프로젝트에 사용할 수 있기를 바라요.

읽어주셔서 감사하고 코딩 계속해주세요!