본문 바로가기
728x90

전체 글196

리액트 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.
리액트 Component, render,constructor(props), props와 state 차이점 React 리액트 Component, render, constructor(props), props와 state 차이점 1. Component Component란, 코드 뭉치를 다른 부분에 이식하거나 재사용하기 위해 사용하는 코드 블록 단위다. Component를 파일 단위로 작성한 후, 필요한 위치에서 import로 사용할 수 있다. (클래스형 component와 함수형 component가 있지만, 일단은 클래스형에 대해서만 다룬다. ) Component를 작성해보자. 좌측 탭에서 src 안에 이렇게 여러가지가 있는데, 우선 여기 src에 components 라는 이름의 폴더를 생성한다. 여기에 TestComponent1.js 라는 이름의 파일을 만들어 아래와 같이 입력한다. import React, {.. 2022. 2. 12.
비동기방식 promise, await, async, axios 정리 리액트에서 비동기 통신 라이브러리 axios를 사용하며 작성한 글. 0. 동기, 비동기? 자바스크립트에서 동기, 비동기 작업의 대표적인 예시는 다음과 같다. 동기 작업은 일반적으로 우리가 작성하는 코드. 이 코드들은 순차적으로 실행된다. 서버에 요청 완료 후 실행 할 함수 동기 작업은 이전 실행의 결과가 나올 때까지 기다렸다가, 결과가 나오면, 그다음 실행을 하는 차근차근 구조이기 때문에 작업의 순서를 정하고 싶다면 순차적으로 코드를 적기만 하면 된다. (동기와 비동기에 대한 개념은 아래 링크에 잘 정리되어 있다.) 비동기 통신과 AJAX (동기 비동기의 개념, 차이,장단점, 예시, 콜백함수, 콜백지옥) 비동기 통신과 AJAX (동기 비동기의 개념, 차이,장단점, 예시, 콜백함수, 콜백지옥) 데이터를 받.. 2022. 2. 12.
masOS 맥 실행중인 포트 확인, 포트 죽이기 맥 실행중인 포트 확인 명령어는 lsof -i :8080 [예시] lsof -i :8080 COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME java 1234 비타민찌 IPv6 0t0 TCP *:http-alt (LISTEN) 실행 중인 포트 죽이기 명령어 kill -9 PID번호 [예시] kill -9 1234 2022. 1. 17.
728x90

티스토리툴바