본문 바로가기
728x90

💎 리액트17

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.
리액트 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.
리액트 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.
728x90

티스토리툴바