[원신 X친소표 사이트 제작기] 3. 한 줄/여러 줄 TextInput 만들기 #React

 

---

한 줄 TextInput 컴포넌트 만들기

X의 닉네임과 ID, 원신의 최애캐와 UID 정보를 받기 위해 입력창이 필요합니다.

여러 줄일 필요는 없고, 딱 한 줄의 TextInput 컴포넌트를 만들어보겠습니다.

 

 

 

 

 

---

OneLineTextInput 컴포넌트

// src/app/pages.js
          <OneLineTextInput
            placeholder="닉네임"
            value={nick}
            onChange={(e) => setNick(e.target.value)}
          />
          <OneLineTextInput
            placeholder="X ID"
            value={xId}
            onChange={(e) => setXId(e.target.value)}
          />

OneLineTextInput 컴포넌트를 페이지로 호출하면, 위와 같은 DOM이 출력됩니다.

 

 

 

OneLineTextInput 소스코드

import { TextInput } from "@/styles/Inputs";
import { FormText, FormTextContainer } from "@/styles/Texts";
import { OneLineContainer } from "@/styles/Containers";

const OneLineTextInput = (props) => {
  const { placeholder, value, onChange } = props;

  return (
    <OneLineContainer>
      <FormTextContainer>
        <FormText>{placeholder}</FormText>
      </FormTextContainer>
      <TextInput
        type="text"
        value={value}
        onChange={onChange}
        required
      />
    </OneLineContainer>
  );
};

export default OneLineTextInput;

 

 

 

props 설정

const { placeholder, value, onChange } = props;

 

부모 컴포넌트로부터 3가지 props를 전달받습니다.

 

placeholder : Input 왼쪽에 표시할 설명 텍스트입니다.
value : Input 필드에 표시되는 현재 state 값입니다.
onChange : Input Value가 변경될 때 호출되는 함수입니다.

 

 

 

JSX 분석

<OneLineContainer>
  <FormTextContainer>
    <FormText>{placeholder}</FormText>
  </FormTextContainer>
  <TextInput
    type="text"
    value={value}
    onChange={onChange}
    required
  />
</OneLineContainer>

OneLineContainer : 텍스트 필드와 설명 텍스트를 한 줄로 정렬하는 <div>입니다.
FormText : props로 전달받은 placeholder를 표시하는 텍스트입니다.
FormTextContainer : FormText를 감싸 스타일링이나 배치를 조정하는 데 사용됩니다.
TextInput : 값을 입력받는 <input>입니다.
- type="text": 단일 줄 텍스트 입력 필드임을 지정합니다.
- value={value}: 입력 필드의 현재 값을 바인딩합니다.
- onChange={onChange}: 입력값이 변경될 때 호출됩니다.
- required: 폼 제출 시 반드시 입력되어야 함을 명시합니다.

 

 

OneLineContainer, FormText, FormTextContainer, TextInput 모두 특별한 기능이 추가된 컴포넌트가 아니라, styled-components로 스타일만 입힌 컴포넌트입니다.

스타일 컴포넌트의 코드 전문을 보고 싶으면, 접은 글을 펼치세요.

const OneLineContainer = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  width: 300px;
  margin-bottom: 0.7em;
`;

const FormTextContainer = styled.div`
  display: flex;
  flex: 1;
  justify-content: center;
`;

const FormText = styled.text`
  font-size: 19px;
  font-weight: bold;
`;

const TextInput = styled.input`
  padding-block: 0px; // input 자체 padding 제거
  padding-inline: 0px; // input 자체 padding 제거
  padding-left: 10px; // 텍스트의 왼쪽에 10px 여백 추가
  width: 215px; // padding-left와 총합 225가 되게 끔
  height: 35px;
  border: none;
  border-radius: 5px;
  background-color: #efecec;
  font-size: 15px;
`;

 

 

 

---

여러 줄 TextInput 컴포넌트 만들기

'추가로 넣고 싶은 코멘트'는 한 줄을 넘어서는 문장이 들어가게 해야 합니다.

그래서 여러 줄을 지원하는 TextInput을 제작하려고 합니다.

 

 

 

 

 

 

---

MultiLineTextInput 컴포넌트

// src/app/pages.js
          <MultiLineTextInput
            placeholder="코멘트"
            value={comment}
            onChange={(e) => setComment(e.target.value)}
          />

MultiLineTextInput 컴포넌트를 페이지로 호출하면, 위와 같은 DOM이 출력됩니다.

 

 

MultiLineTextInput 소스코드

import { TextArea } from "@/styles/Inputs";
import { FormText, FormTextContainer } from "@/styles/Texts";
import { MultiLineContainer } from "@/styles/Containers";

const MultiLineTextInput = (props) => {
  const { placeholder, value, onChange } = props;

  return (
    <MultiLineContainer>
      <FormTextContainer>
        <FormText>{placeholder}</FormText>
      </FormTextContainer>
      <TextArea type="text" value={value} onChange={onChange} required />
    </MultiLineContainer>
  );
};

export default MultiLineTextInput;

 

 

props 설정

const { placeholder, value, onChange } = props;

부모 컴포넌트로부터 3가지 props를 전달받습니다.

 

placeholder : Input 왼쪽에 표시할 설명 텍스트입니다.
value : Input 필드에 표시되는 현재 state 값입니다.
onChange : Input Value가 변경될 때 호출되는 함수입니다.

 

OneLineTextInput과 동일합니다.

 

 

 

JSX 분석

  return (
    <MultiLineContainer>
      <FormTextContainer>
        <FormText>{placeholder}</FormText>
      </FormTextContainer>
      <TextArea type="text" value={value} onChange={onChange} required />
    </MultiLineContainer>
  );

MultiLineContainer : 텍스트 필드와 설명 텍스트를 한 줄로 정렬하는 <div>입니다.
FormText : props로 전달받은 placeholder를 표시하는 텍스트입니다.
FormTextContainer : FormText를 감싸 스타일링이나 배치를 조정하는 데 사용됩니다.
TextArea : 값을 입력받는 <textarea>입니다.
- type="text": 단일 줄 텍스트 입력 필드임을 지정합니다.
- value={value}: 입력 필드의 현재 값을 바인딩합니다.
- onChange={onChange}: 입력값이 변경될 때 호출됩니다.
- required: 폼 제출 시 반드시 입력되어야 함을 명시합니다.

 

 

 

MultiLineContainer, FormText, FormTextContainer, TextArea 모두 특별한 기능이 추가된 컴포넌트가 아니라, styled-components로 스타일만 입힌 컴포넌트입니다.

스타일 컴포넌트의 코드 전문을 보고 싶으면, 접은 글을 펼치세요.

const MultiLineContainer = styled.div`
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  width: 300px;
  margin-bottom: 9px;
`;

const FormTextContainer = styled.div`
  display: flex;
  flex: 1;
  justify-content: center;
`;

const FormText = styled.text`
  font-size: 19px;
  font-weight: bold;
`;

const TextArea = styled.textarea`
  appearance: none;
  padding-block: 0px; // input 자체 padding 제거
  padding-inline: 0px; // input 자체 padding 제거
  padding-left: 10px; // 텍스트의 왼쪽에 10px 여백 추가
  padding-right: 5px;
  width: 210px; // padding-left와 총합 225가 되게 끔
  height: 75px;
  resize: none;
  border: none;
  border-radius: 5px;
  background-color: #efecec;
  font-size: 15px;
`;

 

 

 

---

작동 구조

한 줄, 여러 줄 TextInput에 값을 입력하면,

 

 

 

자동으로 X친소표에 반영이 됩니다.