원신 x친소표2 [원신 X친소표 사이트 제작기] 3. 한 줄/여러 줄 TextInput 만들기 #React 한 줄 TextInput 컴포넌트 만들기X의 닉네임과 ID, 원신의 최애캐와 UID 정보를 받기 위해 입력창이 필요합니다.여러 줄일 필요는 없고, 딱 한 줄의 TextInput 컴포넌트를 만들어보겠습니다. OneLineTextInput 컴포넌트// src/app/pages.js setNick(e.target.value)} /> setXId(e.target.value)} />OneLineTextInput 컴포넌트를 페이지로 호출하면, 위와 같은 DOM이 출력됩니다. OneLineTextInput 소스코드import { TextInput } from "@/styles/Inputs";import { FormText, FormTex.. 2024. 11. 30. [원신 X친소표 사이트 제작기] 2. 이미지를 불러오기/미리보기 구현 #React 프로필(바이오) 이미지 표시 기능어떤 SNS든지 각 계정마다 프사가 존재하고, X역시 마찬가지입니다.X친소표를 만든다면 프사(바이오)역시 꼭 들어가야 하기에, 이미지를 받아올 수 있는 기능이 필요합니다. Bio 컴포넌트// src/app/page.jsconst [bio, setBio] = useState(null);우선 Home 컴포넌트(Next.js app router 기준)에, 프사 이미지를 담을 bio state를 생성합니다.초기값은 null로 지정합니다. 그리고 Bio 이미지를 받아오고, 미리보기 이미지를 출력할 컴포넌트를 제작합니다.// src/components/Bio.jsimport { FormText } from "@/styles/Texts";import { useState, .. 2024. 11. 28. 이전 1 다음
