8. Canva에 앱 만들기. Text Input / Number Input

Canva Text Input

Canva 의 Text Input 의 document 는 여기에서 자세히 볼 수 있습니다.

 

일단 써보기

기본적인 옵션들부터 알아보면

    <TextInput
      placeholder="이름을 입력하세요."
      start={<icons_SearchIcon />}
      end={<ClearDecorator max={10} />}
      />

placeholder 는 값이 없을 때 보여주는 hint 같은거.

start 는 input 앞쪽에, end 는 input 뒷쪽에 있는것들을 정의합니다.

이렇게 하고 앱을 실행해보면, 

SearchIcon 이 안 보이네요. 예제에 나와있는대로 했는데, icons_SearchIcon 은 따로 정의가 필요한가봅니다.

 

아이콘 사용하기

 react 에서 icon 을 사용하기 편한 방법으로 icon을 추가해봅니다.

npm install react-icons

그리고 소스 상단에 import 를 합니다.

import { FaSearch } from 'react-icons/fa';

search icon 을 선언합니다.

export const App = () => {
    /* 생략 */
    
    const SearchIcon = () => <FaSearch />;
    
    /* 생략 */
};

TextInput 의 start 를 다음과 같이, 위에서 추가한 SearchIcon 으로 수정합니다.

    <TextInput
      placeholder="이름을 입력하세요."
      start={SearchIcon}
      end={<ClearDecorator max={10} />}
      />

이렇게 const SearchIcon 으로 변수를 만들어서 사용해도 되고, 직접 <FaSearch /> 를 사용해도됩니다.
start={<FaSearch />}

 

TextInput 의 값 사용하기

defaultValue 옵션을 쓰면 기본값이 입력되어 있습니다.

TextInput 에 입력된 값을 변수로 관리하려면, 다음과 같이 useState 를 사용할 수 있습니다.

export const App = () => {
  /* 생략 */
  const [userName, setUserName] = useState('');
  
  const handleUserNameChange = (event) => {
    setUserName(event.target.value);
  };
  
  /* 생략 */
};


        <TextInput
          value={userName}
          onChange={handleUserNameChange}
          placeholder="이름을 입력하세요."
          start={SearchIcon}
          end={<ClearDecorator max={10} />}
          />

이렇게 하고 저장한 다음에 값을 입력해 봤습니다.

(참고) npm start 를 다시 하지 않고, 소스에서Command(window는 ctrl)+s 로 저장하고, 캔바 앱의 상단에 새로고침 아이콘을 눌러서 변경사항을 반영할 수 있습니다.

그런데, 이런 오류가 발생하네요.

CORS 는 * 로 설정되어있는데,

그래서 browser 에서 디버깅을 해봅니다.

디버깅

(저는 크롬) 브라우저에서 F12 를 누르고, Sources 탭으로 이동하면,

여기서! Canva 앱이 띄워진 상태여야 합니다.

캔바 앱이 떠있는 상태에서 F12

저 (index) 를 더블클릭 하면 소스코드가 보입니다.

거기에서, 디버깅 하려는 메소드인 "handleUserNameChange" 를 검색.

찾아지면, 브래이크 포인트 설정.

그리고 다시 input 의 값을 변경해보면,

event 값 자체가 input 의 value 값이네요.

event.target.value 를 event 로 변경합니다. 아니, 그보다는 event 라는 변수명을 value로 변경합니다.

 

참고) 현재 breakpoint 가 걸려있는 상태라서, 다시 앱을 실행하려면
브래이크 포인트를 한번 더 눌러서 해제하고, 아래 노란 네모의 첫번째 ||> 를 눌러서 진행시키주세요.
브라우저를 새로고침 하는게 아니라 앱만 새로고침 버튼을 누르기 때문에 먹통이 된것 처럼 보일 수 있습니다.

 

변경된 코드

  const handleUserNameChange = (value) => {
    setUserName(value);
  };

 

그리고 버튼을 눌렀을 때, (버튼은 이전 포스팅에서 만들었던...) userName 을 찍어보면 됩니다.

  const doSomething = async () => {
    console.log(userName);
  };

Input Text 에 값을 입력하고, 버튼을 눌렀을 때, Console 에 찍히는 스샷

 

마무리

앱을 만드는데 대부분 필요한 컴포넌트들의 사용법을 알아봤습니다.

이제 다음은 마지막으로

이렇게 개발한 캔바 앱을

• 모든 사람들이 쓰게 하거나,
• 팀내에서만 쓰게 할 수 있도록

배포하는 방법을 써보겠습니다.

 

 

 

• [Canva] - 1. Canva에 앱 만들기. Canva Developers
• [Canva] - 2. Canva에 앱 만들기. 개발환경 설정 (mac)
• [Canva] - 3. Canva에 앱 만들기. canva-apps-sdk 설치
• [Canva] - 4. Canva에 앱 만들기. localhost 에서 app 띄우기
• [Canva] - 5. Canva에 앱 만들기. Button
• [Canva] - 6. Canva에 앱 만들기. api 호출 using axios
• [Canva] - 7. Canva에 앱 만들기. Select (dropdown)
• [Canva] - 8. Canva에 앱 만들기. Text Input / Number Input
• [Canva] - 9. Canva에 앱 만들기. 앱 배포하기