본문 바로가기
728x90

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

티스토리툴바