본문 바로가기
728x90

전체 글199

일드 ‘당신차례입니다’ 짤들 정말 재밌게 정주행 한 일본 드라마 중 하나, ‘당신차례입니다’. 스릴러 추리물이지만 웃긴 포인트도 많았고 끝까지! 긴장감을 끌고 가는 각본에 결말도 깔끔했어요ㅋ-ㅋ 주말에 치킨&콜라 먹으면서 보기 딱 좋은😖 글구 펩시 라임맛도 짱입니다욧 .. 치킨이나 도리토스가 찰떡궁합이에요! 2022. 3. 5.
React input radio default checked 설정(리액트 radio 기본값) [문제] 리액트(React)에서 체크박스(Checkbox) 사용 시 에러가 발생. input type으로 checkbox를 쓸 때(radio 타입 포함) onClick 핸들러를 제공하고 checked 값을 설정하는 식으로 하면 에러가 발생한다. [ 해결방법 ] 1) onClick 핸들러를 없애고 onChange 핸들러를 사용한다. 2) onClick 핸들러를 그대로 두고 싶으면 readonly 키워드를 붙이거나 checked 속성 대신 defaultChecked를 사용한다. 2022. 3. 4.
고양이발 수면양말 🐾 생일선물로 받은 고양이발 수면양말 🧦 받은거라 가격은 잘 모르겠지만 귀여운 생일선물로 완전 제격인것 같아요! 보들보들하고 따듯.. 받았을 때 기분 좋았어요ㅎㅎ 종류는 몇가지 더 있지만 이게☝🏻제일 귀엽습니다 착샷은 아래에 2022. 3. 4.
리액트 button 태그 자동 클릭되는 현상 막는 법 [ 리액트 button 태그 자동으로 클릭되는 현상 막는 법 ] (이벤트가 두번 실행되는 오류 해결하기) console.log("test")} > 1) type="button" 설정 2) onClick={() => console.log("test")} [ 이유 ] onClick 이벤트에 함수를 전달하는게 아니라 바로 호출했기 때문에 리액트의 onclick은 렌더링 때 실행된다. (1) 렌더링 될때 (버튼 클릭 전) 이벤트 발생함. alert("hi")} /> 정상적으로 버튼을 클릭할 때 이벤트 발생함. (2) 혹은 index.js 파일의 StrictMode 때문일 수 있으니, 위 방법으로 안되면 StrictMode 코드도 지워봐야한다. https://ko.reactjs.org/docs/handling-e.. 2022. 3. 3.
리액트 useEffect() 사용법 useEffect() 사용법 useEffect()는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이다. 기본 형태 : useEffect( function, deps ) - function : 수행하고자 하는 작업 - deps : 배열 형태이며, 배열 안에는 검사하고자 하는 특정 값 or 빈 배열 useEffect 함수 불러오기 import React, { useEffect } from 'react'; 1. Component가 mount 됐을 때 (처음 나타났을 때) 컴포넌트가 화면에 가장 처음 렌더링 될 때 한 번만 실행하고 싶을 때는 deps 위치에 빈 배열을 넣는다. useEffect(() => { console.log('마운트 될 때만 실행된다'); }, []); .. 2022. 3. 3.
리액트 검색기능 구현 (스프링부트, 리액트 연동 쇼핑몰 검색 기능 구현) 스프링부트, 리액트 연동 쇼핑몰 검색 기능 구현 Header 페이지에서 검색 하면 -> ProductSearch 라는 새 페이지에서 검색 결과가 출력되는 검색 기능 구현. 백엔드 구현 부분은 이전 글을 참고해 주세요. 이전글 : 스프링부트 검색기능 구현 1_ Header.js function Header() { const [word, setWord] = useState(""); const onSubmit = async () => { window.location.href = "/search/" + word; }; return ( { setWord(e.target.value); console.log(word); }}> { onSubmit(); }}> ); } input 으로 검색어를 입력하면 변경된 값을 감.. 2022. 3. 3.
리액트 : 부모 컴포넌트에서 자식 컴포넌트 함수 호출하는 법 React 부모 컴포넌트에서 자식 컴포넌트 함수 호출하는 법 ✅ React.forwardRef forwardRef는 부모 컴포넌트로부터 ref 속성을 받는 한 컴포넌트를 만든다. 그리고 그 속성을 받은 컴포넌트로부터 또 자식에게 그 속성을 전달하게 한다. 아래 그림을 보면 이해하기 쉽다. ✅ React.useImperativeHandle useRef를 사용하면 컴포넌트의 instance value가 생성된다. 그리고 그 instance value는 DOM 요소를 조작할수 있게 한다. ✅ 코드 예제 Parents.js import React, { useRef } from "react"; import { useState } from "react/cjs/react.development"; import Chil.. 2022. 3. 2.
스프링부트 검색기능 구현 : Get방식으로 넘긴 Param 받기, 검색 쿼리문(where 컬럼명 like) 스프링부트, 리액트로 검색 기능 구현하는데 가장 먼저 한 부분을 정리한다. (Spring Boot로 Parameter 전달 받는 방법, Spring Boot Get방식으로 넘긴 값 받기) 검색은 get 방식이다. get 방식으로 검색어를 입력하면 입력된 단어를 받는다. 스프링부트 get 방식으로 넘긴 값을 전달 받아보자. java 클래스에 아래와 같이 추가한다. @GetMapping("/search") public void getSearchProducts( @RequestParam(value = "search") String search) { try { List getProductResList = productService.getSearchProducts(word); return new BaseRespo.. 2022. 3. 2.
리액트 key 할당해도 해결 안되는 문제. Warning:Each child in an array or iterator should have a unique"key"prop. 리액트에서 key를 할당해도 해결 안되는 문제. Warning: Each child in an array or iterator should have a unique “key” prop. 보통 react에서 위 에러가 뜨면 key를 할당해 해결해 주면 된다. 흔하기도 하고 간단하게 해결할 수 있는 워닝이다. 그런데 key를 할당해도 여전히 같은 에러가 떴다. key 값을 map의 index를 줬다가, index는 쓰지 말라고 해서 유니크한 값을 줬는데도 해결되지 않았는데.. 결국 아래처럼 해서 해결했다. [해결] 내용 [원인] 감싸는 코드 가 key보다 더 상위로 인식되어서 제대로 인식 되지 않아 발생한 문제였다. 대신 같은걸로 바꿔서 key를 할당해 주면 해결된다. 내용 2022. 2. 28.
728x90