본문 바로가기

Study/React

 (19)
[React.js] 이미지 / 파일 업로더 구현 이미지나 파일을 업로드해서 뷰로 보여주는 라이브러리가 존재하지만 라이브러리에 너무 의존하다보니 에러가 발생하면 에러를 극복하는데 시간을 허비하기 때문에 답답하기 마련이다. 이미지와 파일을 업로드했을 때 이미지는 뷰로, 파일은 리스트 형태로 보여주는 기능을 구현해보았다. 여기서 이미지는 클릭했을 때 파일 탐색기를 열어 파일을 불러와 64비트 인코딩을 통해 문자열로 나타내준다. 일반적인 파일 업로더는 파일 이름과 닫기버튼이 함께 보인다. https://github.com/htwenty-1/react-file-uploader
[React.js] React Router 기본, 중첩 Router 사용하기 1. Routing이란? 웹을 사용할 때 전통적인 링크 연결방식은 HTML에서 a 태그를 사용하여 href 속성에 연결할 링크를 넣어주는 방식이다. 이러한 방식은 웹사이트의 규모가 크지 않을 때는 사용하는데 크게 불편함이 없지만 로드되는 컨텐츠나 페이지의 용량자체가 크다면 불편함을 초래할 수 있다. 애초에 링크로 연결되는 방식은 각각의 HTML 파일을 로드하는 것이기 때문에 새로운 페이지로 이동할 때마다 화면 깜빡임이 지속될 것이며 해당 페이지 자체 또는 로드할 컨텐츠의 용량이 크다면 사용자 입장에서는 불만이 생길 수 밖에 없을 것이다. 위에서 구현한 예시는 간단한 예제이기 때문에 그러한 불편함을 느끼기 어려울 것이나, 페이스북이나 인스타그램처럼 퓨어 텍스트보다 압도적으로 높은 용량의 이미지/영상 컨텐..
[React.js] NavBar 예제 네비게이션바를 만들 때 초기에 접속중인 메뉴 목록에는 색깔을 입혀주고 그렇지 않은 경우에는 색을 빼주는 경우가 있다. 예를 들면 구글에서 어떤 키워드로 검색을 시도 했을 때 결과 화면의 네비게이션은 최초에 이렇게 전체라는 메뉴에 파란색으로 스타일이 들어가고 이미지 탭으로 옮기게 되면 이렇게 전체라는 메뉴에서 스타일이 빠지고 이미지에만 스타일이 들어간다. 처음에는 boolean 타입의 배열을 생성해서 조작하였으나 처음에 아무곳에도 스타일이 들어가지 않고 클릭했을 때만 스타일이 들어갔다. 그래서 시도한 방법은 useLocation을 사용해서 현재 페이지의 URL과 아이템 배열의 to 값을 비교해서 같을 때만 활성화된 스타일이 적용되도록 했다. 스타일드 컴포넌트에 props로 값을 넘겨서 값을 비교해주는 방식..
[React.js] 둥근 체크박스 만들기 두개의 차이는 체크박스냐 라디오 버튼이냐 차이다. 라디오 버튼의 경우 다양하게 변형해서 사용할 수 있지만 체크박스는 둥글게 만드는게 안된다.. 즉, border-radius 적용이 안된다... 리액트에서 둥근 체크박스를 만들기 위해 다음과 같이 코드를 작성하였는데,,, 배경만 나오고 체크모양 추가가 안되더라.. import { useState } from "react"; import styled from "styled-components"; export default function App() { const [isChecked, setIsChecked] = useState(false); const onClickCheck = () => { setIsChecked(!isChecked); console.log..
[React Native] Modal 사용하기 구현 예제를 보려면 "더보기" 클릭! 더보기 Modal 구현 예제 코드 import AsyncStorage from "@react-native-async-storage/async-storage"; import axios from "axios"; import React, { useEffect, useRef, useState } from "react"; import { Alert, Animated, Button, Dimensions, Modal, PanResponder, Pressable, StyleSheet, Text, TouchableOpacity, TouchableWithoutFeedback, View } from "react-native"; import config from "../../../proj..
[React Native] useEffect의 dependency array 사용 시 주의점 useEffect란? useEffect Hook은 클래스형 컴포넌트에서 쓰이던 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 형태로 최초 렌더링 시 무조건 실행할 작업, 컴포넌트가 업데이트 될 때 작업, 컴포넌트가 언마운트(파괴, 제거)되었을 때 작업을 실행하게 해준다. useEffect 사용 예시 useEffect는 앞서 언급한 것처럼 최초 렌더링시, 컴포넌트 업데이트시, 컴포넌트 언마운트시 실행되는데 실행되는 내용은 useEffect의 디폴트 파라미터인 콜백함수 내부에 들어가게 된다. 예를 들면 import React, { useState, useEffect } from "react"; export default function A..
[React Native] 다른 페이지로 값 전달하기 앱을 개발하다가 현재 페이지에서 useState로 세팅된 값을 넘겨주어야 할 일이 생겼다. export default function PaymentResult() { // ... return ( { if (buyerName === '' || buyerName === null) { Alert.alert('배송지 정보 누락', '받는 사람의 이름이 입력되지 않았습니다.'); } else if (buyerAddr === '' || buyerAddr === null) { Alert.alert('배송지 정보 누락','받는 사람의 주소가 입력되지 않았습니다.'); } else if (buyerAddrDetail === '&..
[React Native] axios를 사용한 비동기 통신과 장면 전환 1. 컨트롤러 axios를 통해 JSON 형태로 데이터를 주고 받는다. 이 때 axios가 url 패턴을 찾아서 값을 전달해줘야 하는데 다음과 같은 컨트롤러를 통해 값을 전달하고 결과를 받아온다. import com.hwangduil.springbootbackend.dto.BbsDto; import com.hwangduil.springbootbackend.service.BbsService; import lombok.RequiredArgsConstructor; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.web.bind.annotation.GetMapping; import org.springframew..

티스토리툴바