[React] Text 입력 웹페이지 생성하기 #1 (textarea, input)

React

[React] Text 입력 웹페이지 생성하기 #1 (textarea, input)

베이글러 2023. 4. 21. 19:59

728x90

아래 단계에 따라 웹페이지를 구성하여 생성하고자 한다.

크게는 (1)화면을 구성하고, (2)화면을 구동하는 2가지 스텝으로 구성하고 각 스텝마다 세분화하였다.

본 포스팅은 (1)화면을 구성하는 스텝의 첫번째 1.1단계에 해당된다.

1. 화면 구성

> 1.1 : Input Component 생성하기 (textarea, input)

> 1.2 : Option Component 생성하기 (option)

> 1.3 : CSS 적용하기

2. 화면 구동

> 2.1 : DOM 조작하기

> 2.2 : 배열 사용하기

이번 1.1단계에서는 React 프로젝트를 생성하여, 텍스트 값을 입력하는 부분을 구성하고자 한다.

텍스트 값을 입력하는 부분은 textarea 태그와 input 태그를 활용한다.

React Component란?

React Component란 리액트로 만들어진 앱을 이루는 최소한의 단위로 화면에 보여지는 UI 요소를 컴포넌트 단위로 구분하여 구현할 수 있다.

Create React App을 통해 생성된 리액트 프로젝트에서 JSX를 활용하여 Component를 추가할 수 있다.

<textarea>, <input> 태그란?

<textarea>

멀티라인 일반 텍스트 편집 컨트롤을 나타냅니다.

<label for="story">Tell us your story:</label>

<textarea id="story" name="story" rows="5" cols="33">
	It was a dark and stormy night...
</textarea>

(예시)

Tell us your story:

<input>

웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성하고, 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재한다.

<input> 요소는 유형에 따라 달라지지마 Default값은 text이다. 앞으로의 예제에서도 text 유형일 경우를 다루려고 한다.

- <input> 유형

유형	설명
button	기본 행동을 가지지 않으며 value을 레이블로 사용하는 푸시 버튼.
checkbox	단일 값을 선택하거나 선택 해제할 수 있는 체크박스.
color	색을 지정할 수 있는 컨트롤. 브라우저가 지원하는 경우, 활성화 시 색상 선택기를 열어줌.
date	날짜(연월일, 시간 없음)를 지정할 수 있는 컨트롤. 브라우저가 지원하는 경우, 활성화 시 날짜를 선택할 수 있는 달력 등을 열어줌.
datetime-local	날짜와 시간을 지정할 수 있는 컨트롤. 시간대는 지정할 수 없음. 브라우저가 지원하는 경우, 활성화 시 날짜를 선택할 수 있는 달력과, 시계 등을 열어줌.
email	이메일 주소를 편집할 수 있는 필드. 텍스트 입력 필드처럼 보이지만 유효성 검증 매개변수가 존재하며, 브라우저와 장치가 동적 키보드를 지원하는 경우 이메일에 적합한 키보드를 보여줌.
file	파일을 지정할 수 있는 컨트롤. accept 특성을 사용하면 허용하는 파일 유형을 지정할 수 있음.
hidden	보이지 않지만 값은 서버로 전송하는 컨트롤.
image	src 특성에 지정한 이미지로 나타나는 시각적 제출 버튼. 이미지의 src를 누락한 경우 alt 특성의 텍스트를 대신 보여줌.
month	연과 월을 지정할 수 있는 컨트롤. 시간대는 지정할 수 없음.
number	숫자를 입력하기 위한 컨트롤. 스피너를 표시하고 지원되는 기본 확인을 추가함.
password	값이 가려진 한줄 텍스트 필드. 사이트가 안전하지 않으면 사용자에게 경고함.
radio	같은 name 값을 가진 여러개의 선택중에서 하나의 값을 선택하게 하는 라디오 버튼.
range	값이 가려진 숫자를 입력하는 컨트롤. 디폴트 값이 중간값인 범위 위젯으로 표시함. 접속사 min 와 max 사이에 사용되며 수용가능한 값의 범위를 정의함.
reset	양식의 내용을 디폴트값(기본값)으로 초기화하는 버튼. 권장되지 않음.
search	검색문자열을 입력하는 한줄 텍스트 필드. 줄바꿈 문자는 입력값에서 자동으로 제거됨. 지원 브라우저에서 필드를 클리어하기 위해 사용되는 삭제 아이콘이 포함됨. 동적 키패드들이 있는 몇몇 장치에서 엔터키 대신에 검색 아이콘을 표시함.
submit	양식을 전송하는 버튼.
tel	전화번호를 입력하는 컨트롤. 몇몇 장치에서 동적 키패드들과 전화번호 입력기를 표시함.
text	디폴트 값. 한줄의 텍스트 필드로 새줄 문자는 입력값으로부터 자동으로 제거됨.
time	시간대가 없는 시간값을 입력하는 컨트롤.
url	URL을 입력하는 필드. 텍스트 입력처럼 보이지만, 검증 매개변수가 있어 동적 키보드들을 지원하는 브라우저와 장치들에 관련된 키보드가 있음.
week	시간대가 없는 주-년 값과 주의 값을 구성하는 날짜를 입력하는 컨트롤.
button	기본 행동을 가지지 않으며 value을 레이블로 사용하는 푸시 버튼.
checkbox	단일 값을 선택하거나 선택 해제할 수 있는 체크박스.
color	색을 지정할 수 있는 컨트롤. 브라우저가 지원하는 경우, 활성화 시 색상 선택기를 열어줌.

자세한 내용은 관련 페이지 -> https://developer.mozilla.org/ko/docs/Web/HTML/Element/

1.1 : Input Component 생성하기 (textarea, input)

1. React 프로젝트 생성

▶ Create React App을 통해 React 프로젝트 생성한다.

VS Code에서 React 프로젝트 생성 방법 -> https://break-time-for.tistory.com/entry/React-VS-Code로-Create-React-App-사용하기

[React] VS Code로 Create React App 사용하기

VS Code로 Create React App 사용하기 React 프로젝트를 진행하기 위해서는 Webpack, Babel 등의 라이브러리 설정이 필요하다. 해당 라이브러리는 기능적인 면에서도 매우 넓고 다양하여 모두 다 학습하고

break-time-for.tistory.com

2. React App 실행

▶ React App을 실행하기 위해 아래 코드를 기입하여 시작한다.

npm start

▶ 프로젝트를 시작하면, 아래 코드가 실행되며 웹 브라우저가 구동이 된다.

해당 웹 브라우저에서 바로 추가되는 Component를 확인하면서 진행하고자 하여, 해당 웹 브라우저는 옆에 계속 열어두고 진행하려고 한다.

3. Text 입력 Component 추가

▷ 새로운 파일 추가는 아래 그림과 같이 프로젝트명 옆에 있는 버튼을 통하거나, 마우스 오른쪽 버튼을 통하여 생성 가능하다.

▶ 프로젝트 내 src 폴더 하위에 새로운 파일로 [Input.js] 파일을 추가한다.

해당 파일로 아래 그림과 같이 Text를 입력하는 Component를 생성하고자 한다.

(1) INPUT

(2) TEXT AREA

▶ 두 가지 요소를 사용하여 화면을 구성할 예정이므로 [Input.js] 파일을 아래와 같이 작성해준다.

import {useState} from "react";

const Input = () => {

    const [state, setState] = useState({
        text_input_first : "",
        text_input_second : "",
    });

    return (
        <div className="Input">
            <h2> Text 입력 </h2>
            <div>
                <input 
                    name = "text_input_first"
                    value = {state.text_input_first}
                    onChange = {(e) => {
                        setState({
                            ...state,
                            text_input_first : e.target.value,
                        });
                    }}
                />
            </div>
            <div>
                <textarea
                    value = {state.text_input_second}
                    onChange={(e) => {
                        setState({
                            ...state,
                            text_input_second : e.target.value,
                        })
                    }}
                />
            </div>
        </div>
    );
};

export default Input;

▶ 아래 코드에서 1번 박스가 <input> 요소를 구성하며, 2번 박스에서 <textarea> 요소를 구성한다.

<input> 요소의 이름을 'text_input_first'로, <textarea> 요소의 이름을 'text_input_second'로 명하였고,

'setState' 함수를 사용하여 요소의 값이 변경되는 것을 반영하였다.

▶ 프로젝트 내 src 폴더 하위의 [App.js]에 [Input.js]파일을 불러온다.

[Input.js]에서 작성한 태그만 브라우저에 보이기 위해, 기존 [App.js]의 div 태그 내의 내용은 삭제하였다.

import logo from './logo.svg';
import './App.css';

import Input from "./Input";

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

export default App;

▶ [App.js]와 [Input.js]을 저장하면 웹 브라우저는 자동으로 수정된다.

혹시 파일 저장을 해도 수정이 안 된다면, 웹 브라우저를 [새로고침]하면 된다.

아래 그림과 같이 기존 브라우저에 [Input.js]에서 정의한 <input>와 <textarea>가 나오는 것을 볼 수 있다.

▶ 첫번째 박스는 <input>으로 만들었으며, 두번째 박스는 <textarea>로 만들어서 약간의 차이가 존재한다.

<textarea>의 경우 멀티라인을 지원하기 때문에 문장이 줄을 넘어가도 다음 줄로 보이게 되지만,

<input>의 경우 문장이 칸을 넘어가면 그대로 보이지 않게 된다.

본 포스팅에서는 단순히 Text를 입력받는 <input>과 <textarea>를 별도 css없이 단순히 나열하는 형태로 구성하였지만,

다음 포스팅을 통해 단계적으로 화면을 좀 더 다양하게 구성하고자 한다 !