[React] Custom Component 종합퀴즈

01. 다음 중 CDD(Component Driven Development)에 대한 설명으로 옳은 것을 모두 고르세요.

A. 부품단위로 UI 컴포넌트를 만들어 나가는 개발을 진행할 수 있다.
B. React 환경에서 CDD를 지원하기 위한 툴 중 하나는 Storybook이 있다.
C. 하향식 개발에 적합한 방법이다.
D. 재사용할 수 있는 컴포넌트를 개발할 수 있다

A. 부품단위로 UI 컴포넌트를 만들어 나가는 개발을 진행할 수 있다.
B. React 환경에서 CDD를 지원하기 위한 툴 중 하나는 Storybook이 있다.
D. 재사용할 수 있는 컴포넌트를 개발할 수 있다.

위의 설명들이 모두 CDD(Component Driven Development)에 대한 옳은 설명입니다.

CDD는 UI 컴포넌트를 부품 단위로 개발하고, 재사용 가능한 컴포넌트를 만들어 나가는 개발 방법론입니다. React 환경에서는 Storybook과 같은 툴을 사용하여 CDD를 지원합니다. 하향식 개발이 아니라, 상향식 개발 방법론인 Agile과도 잘 어울리며, 컴포넌트별 개발 및 테스트가 가능하여 개발 생산성을 높일 수 있습니다.

---

02.CSS in JS에 대한 설명으로 옳은 것을 모두 고르세요.

A. CSS-in-JS에는 대표적으로 Styled-Components가 있다.
B. 빠른 페이지 로드에 유리하다.
C. 모든 스타일이 전역으로 선언되어, 복잡한 class 명명 규칙을 적용해야 하는 문제가 있다.
D. CSS 작성을 위해 여러 라이브러리를 사용하게 되므로, 번들의 크기가 커진다.

A. CSS-in-JS에는 대표적으로 Styled-Components가 있다.
D. CSS 작성을 위해 여러 라이브러리를 사용하게 되므로, 번들의 크기가 커진다.

CSS in JS는 CSS를 JavaScript 파일 안에 작성하는 방법으로, 대표적으로 Styled-Components가 있습니다. 페이지 로드 속도는 기존의 CSS와 크게 다르지 않으며, 코드를 작성할 때 CSS와 JavaScript가 함께 작성되기 때문에, CSS의 재사용성이 높아집니다.

하지만, 모든 스타일이 전역으로 선언되어 class 명명 규칙을 적용해야 하는 문제가 있습니다. 또한, CSS 작성을 위해 여러 라이브러리를 사용해야 하므로, 번들의 크기가 커질 수 있습니다.

---

03.다음 중 빈칸에 들어가야 할 코드를 고르세요.

// App 컴포넌트에 전역스타일을 적용하려고 합니다.
// index.js에서 전역스타일을 적용하는 예시입니다.

//index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import GlobalStyle from "./GlobalStyle";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
	(1)____________
    <App />
  </React.StrictMode>
);

//App.js
import (2)____________ from "styled-components";

const Button1 = (2)____________.button`
  background: ${(props) => ((3)____________ ? (3)____________ : "white")};
`;

const Button2 = (2)____________.button`
  background: ${(props) => (3)____________ || "white"};
`;

export default function App() {
  return (
    <>
      <Button1 color="tomato">Button1</Button1>
      <br />
      <Button2 color="turquoise">Button2</Button2>
    </>
  );
}

A.(1) <GlobalStyle></GlobalStyle> , (2) style , (3) color

B.(1) <GlobalStyle /> , (2) style , (3) props.color

C.(1) <GlobalStyle></GlobalStyle> , (2) styled , (3) props

D.(1) <GlobalStyle /> , (2) styled , (3) props.color

1. <GlobalStyle />

2. styled
3. props.color

---

04. 다음 중 Storybook에 대한 설명으로 옳은 것을 모두 고르세요.

A. CDD(Component Driven Development)를 하기위한 도구다.
B. 특정 프로젝트에 종속되는 라이브러리다.
C. 컴포넌트 재사용성, 테스트, 개발 속도를 향상시킬 수 있다.
D. 컴포넌트를 문서화 및 시각화할 수 있다.

A. CDD(Component Driven Development)를 하기위한 도구다.
C. 컴포넌트 재사용성, 테스트, 개발 속도를 향상시킬 수 있다.
D. 컴포넌트를 문서화 및 시각화할 수 있다.

Storybook은 CDD(Component Driven Development)를 위한 도구 중 하나로, 컴포넌트 재사용성, 테스트, 개발 속도를 향상시킬 수 있습니다. 또한, 컴포넌트를 문서화하고 시각화할 수 있어, 프로젝트에 참여하는 모든 인원이 컴포넌트의 동작과 사용 방법을 이해하기 쉽습니다.

특정 프로젝트에 종속되는 라이브러리는 아니며, React, Vue, Angular 등 다양한 프론트엔드 프레임워크와 호환됩니다.

---

05. 아래와 같이 Storybook에서 이미지를 불러오려고 합니다. 다음 중 빈칸에 들어가야 할 코드를 고르세요.

// WithAnImage.js
export function WithAnImage(props) {
  return <img style={{ width: props.width }} src={props.src} alt={props.alt} />;
}

// WithAnImage.stories.js
import { WithAnImage } from "./WithAnImage";
import Logo from "../Image/Codestates_Fulllogo_Color.png";
import SmallLogo from "../Image/smallLogo.jpeg";

export default {
  title: (1)____________,
  component: WithAnImage,
};

const Template = (args) => <WithAnImage {...args} />;

export const TypeOne = (2)____________;
TypeOne.args = {
  src: Logo,
  alt: "Logo",
  width: "300px",
};

export const TypeTwo = (2)____________;
TypeTwo.args = {
  src: SmallLogo,
  alt: "SmallLogo",
  width: "250px",
};

A.(1) "Logo", (2) Template.bind()
B.(1) "Example/Logo", (2) Template.bind()

C.(1) "Logo", (2) Template.bind({})

D.(1) "Example/Logo", (2) Template.bind({})

A.(1) "Logo", (2) Template.bind()

B.(1) "Example/Logo", (2) Template.bind()
C.(1) "Logo", (2) Template.bind({})
D.(1) "Example/Logo", (2) Template.bind({})

(1) title을 통해서 Storybook 앱의 사이드바에서 컴포넌트를 참조할 수 있습니다.

(2) Template.bind({})는 함수의 복사본을 만드는 표준 JavaScript의 한 기법입니다.

---

06. 다음 중 빈칸에 들어가야 할 코드를 고르세요.

// 버튼을 클릭시 input 요소에 focus가 되도록 하려고 합니다.

import React, (1)_________ from 'react';

function TextInputWithFocusButton() {
  const inputRef = useRef(null);
  const onButtonClick = () => {
    (2)_________.focus();
  };

  return (
    <>
      <input ref={ (3)_________ } type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>);
}

A.(1) useRef , (2) current , (3) inputRef

B.(1) { useRef } , (2) inputRef , (3) inputElement
C.(1) { useRef } , (2) inputRef.current, (3) inputRef
D.(1) useRef , (2) inputRef.current, (3) inputElement

(1) import React, { useRef } from 'react'; 을 통해 useRef 를 불러옵니다.
(2) useRef(초기값); 자리에는 { current: 초기값 } 이 남고, input 요소에 사용할 수 있는 메서드 중 하나인 focus 를 사용해 포커싱을 구현합니다.
(3) 원하는 요소의 속성으로 ref={inputRef} 설정하여 요소를 가져옵니다.

---

07. 아래의 기능을 구현하기 위해 빈칸에 들어가야 할 코드를 고르세요.

import React, { useState } from 'react';
import styled from 'styled-components';

const Container = styled.div`
  width: 100vw;
  height: 100vh;
  display: flex;
  (1)__________;
  align-items: center;
`;

const Modal = styled.div`
  width: 300px;
  height: 300px;
  background-color: blue;
  text-align: center;
  padding: 15px;
  border-radius: 20px;
`;

const Button = styled.button`
  background-color: blue;
  color: white;
  border: none;
  border-radius: 15px;
  padding: 10px 20px;
  cursor: pointer;
`;

const ExitButton = styled(2)__________`
  background-color: white;
  color: blue;
  padding: 5px 10px;
  margin-bottom: 85px;
`;

const Text = styled.h1`
  color: white;
  font-size: 40px;
  font-weight: bold;
`;


export default function App() {
  const [isOpen, setIsOpen] = useState(false);

  const handleClick = () => {
    setIsOpen((3)__________);
  };

  return (
    <Container>
        {(4)__________ ? (
          <Modal>
            <ExitButton onClick={handleClick}>X</ExitButton>
            <Text>Code States</Text>
          </Modal>
        ) : <Button onClick={handleClick}>Open</Button> }
    </Container>
  );
}

A.(1) justify-content: center;, (2) (Button), (3) !isOpen , (4) isOpen

B.(1) justify-content: start;, (2) .button, (3) isOpen , (4) !isOpen
C.(1) justify-content: start;, (2) .button, (3) !isOpen , (4) isOpen
D.(1) justify-content: center;, (2) (Button), (3) isOpen , (4) !isOpen

(1) 메인축이 row일 때, 가로 중앙 정렬시 justify-content: center; 를 사용합니다.
(2) Styled Components로 만든 컴포넌트를 재사용 하려면 styled(가져올 컴포넌트 이름) 으로 작성하면 됩니다.
(3) 매 클릭마다 기존 state의 반대 값을 반복적으로 설정하려면 !isOpen 로 작성하면 됩니다.
(4) 삼항연산자의 조건식에 isOpen 을 넣어 구현할 수 있습니다.

---

08.다음 중 useRef 에 대한 설명으로 옳은 것을 모두 고르세요.

A. DOM 노드, 엘리먼트, 그리고 React 컴포넌트 주소값을 참조할 수 있다.
B. useRef 를 통해 DOM을 직접 조작시 리렌더링이 된다.
C. useRef 를 통해 값을 저장시 리렌더링 후 값이 초기화가 된다.
D. useRef 를 남용하는 것은 부적절하고, React의 선언형 프로그래밍 원칙과 배치된다.

A. DOM 노드, 엘리먼트, 그리고 React 컴포넌트 주소값을 참조할 수 있다.

B. useRef 를 통해 DOM을 직접 조작시 리렌더링이 된다.
C. useRef 를 통해 값을 저장시 리렌더링 후 값이 초기화가 된다.
D. useRef 를 남용하는 것은 부적절하고, React의 선언형 프로그래밍 원칙과 배치된다.

useRef 로 DOM 노드, 엘리먼트, 그리고 React 컴포넌트 주소값을 참조할 수 있습니다. 아래 예시 코드처럼 작성하시면 주소값을 활용할 수 있습니다.

기본 React 문법을 벗어나 useRef 를 남용하는 것은 부적절하고, React의 특징이자 장점인 선언형 프로그래밍 원칙과 배치되기 때문에, 조심해서 사용해야 합니다.

---

09. 아래의 기능을 구현하기 위해 빈칸에 들어가야 할 코드를 고르세요.

import { useState } from 'react';
import styled from 'styled-components';

export const Tab = () => {
  const [currentTab, setCurrentTab] = useState(0);

  const menuArr = [
    { name: 'Tab1', content: 'Tab menu ONE' },
    { name: 'Tab2', content: 'Tab menu TWO' },
    { name: 'Tab3', content: 'Tab menu THREE' }
  ];

  const selectMenuHandler = (index) => {
    setCurrentTab(index);
  };

  return (
    <>
      <TabMenu>
        {(1)__________.map((ele, index) => {
          return (
            <TabList
              key={index}
              className={(2)__________ ? 'submenu focused' : 'submenu'}
              onClick={(3)__________}
            >
              {ele.name}
            </TabList>
          );
        })}
      </TabMenu>
      <Desc>
        <Text>{menuArr[currentTab].content}</Text>
      </Desc>
    </>
  );
};

A.(1) menuArr , (2) currentTab.index === index , (3) selectMenuHandler(index)

B.(1) menuArr.name , (2) currentTab === index , (3) () => selectMenuHandler(index)

C.(1) menuArr.content , (2) currentTab.index === index , (3) selectMenuHandler(index)

D.(1) menuArr , (2) currentTab === index , (3) () => selectMenuHandler(index)

D.(1) menuArr , (2) currentTab === index , (3) () => selectMenuHandler(index)

(1) map 메서드는 배열에 사용하기 때문에 menuArr 가 사용 되어야 합니다.
(2) 현재 누른 탭의 인덱스와 배열의 요소의 인덱스와 일치했을 때를 가정해야 하므로 currentTab === index 가 맞습니다.
(3) 탭을 클릭시 해당 탭의 인덱스를 클릭 이벤트 함수에 전달해주어야 하므로 () => selectMenuHandler(index) 이 맞습니다.

---