Props

1. props 란 ? : 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할때 사용되어지는 단방향 데이터 전달 방식 2. 사용 방식 부모 컴포넌트에서 자식 컴포넌트를 호출시 자식 컴포넌트 태그 내 v-bind나 : 키워드를통해 데이터를 전달하고 자식 컴포넌트에서 props객체를 통해 데이터를 전달받는 방식이다. 1) 부모 컴포넌트 2) 자식 컴포넌트 부모 컴포넌트에서 보내고자 하는 데이터를 디렉티브를 적어 props이름을 설정한다. 그리고 보내고자하는 데이터를 이곳에 보낸다. 그리고 자식 컴포넌트에서 이를 props로 가져온다. 3) 예시 props: { listArray: { type: Array, required: true }, pageSize: { type: Number, required: fals..

1. 이미지 업로드 const onClickImageUpload = useCallback(() => { imageInput.current.click(); }, [imageInput.current]); 이미지 업로드 2. hook으로 저장하여 커스텀 훅으로 사용 여기서 거의 핸들러 빼고 setter만 넣어서 value와 setter만 리턴하는 경우로 많이 쓴다. import { useState, useCallback } from 'react'; export default (initValue = null) => { const [value, setter] = useState(initValue); const handler = useCallback((e) => { setter(e.target.value); }, ..

context()에 대해서 정리하는 이유는 많이 보았기에 궁금해서 찾아보다가 너무 유익해서 정리하고자 한다. context()는 언제 쓰는가 여러 글 봤었는데 유튜브의 영상이 잘 설명되어 있어서 맨아래에 첨부해놓는다. react로 개발을 하다보면 props를 가져와서 쓰고 싶은 경우가 생긴다. 즉 하위 컴포넌트에서 상위 컴포넌트의 데이터를 가져오고 싶은 것이다. 나의 경우는 https://uhee-12.tistory.com/51 위 글을 보면 알겠지만, navigate와 location을 많이 사용했었다. 또한, redux를 사용하지 않아서 아직은 상태관리에 많은 어려움을 겪고 있다. 그러던 와중 context()를 알게 된 것이다. 위에서도 말한 것 같이 데이터를 전역적으로 사용하고 싶을 때 conte..

react의 기본 개념이 부족해서 값을 전달하거나 받아오는 것에 한계를 느껴 기본 개념을 정리하다가 글을 쓰게 되었다. 개념 컴포넌트 속성을 설정할 때 사용하는 요소로, 간단히 말하자면 컴포넌트에서 컴포넌트로 전달하는 데이터이다.(단방향 데이터의 형식의 흐름을 갖는다) properties의 줄임말이다. props는 읽기 전용으로, 함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정해서는 안된다. 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야한다. 순수함수 → 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하기 때문 function sum(a, b) { return a + b; } 순수함수 ❌ → 자신의 입력값을 변경하기 ..

업데이트 날짜를 찾아볼려고 했는데 한 2021년 11월쯤 업데이트한 것 같다. 거의 다 최신 버전으로 쓰고 있고 배우기도 그렇게 배워서 정리해야된다는 생각을 못했는데, 여러 모듈을 쓰다보니 이전 버전들을 쓰는 블로그들로 인해 헷갈려서 정리하게 되었다. 업데이트를 하면서 번들 크기가 최적화가 가능해졌다. 70%정도로 줄어든다. React v16.8 React Router v6은 React Hook을 많이 사용하므로 React Router v6으로 업그레이드를 시도하기 전에 React 16.8 이상으로 설치가 되어 있어야 사용이 가능하다. React Router v5는 React >= 15와 호환된다. 내가 글을 쓰고 있는 시점은 react-router-dom은 v6.3.0이다. 설치 npm i react-..

항상 react를 쓰는데 인터넷강의로 너무 간략하게 배우다보니 이에 대한 개념이 적립되지 못해 이제야 이 개념을 적립하고자 정리한다. 개념 useEffect() 함수는 React component가 렌더링 될 때마다 특정 작업(Sied effect)을 실행할 수 있도록 하는 리액트 Hook이다. 여기서 Side effect는 component가 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 말한다. 이러한 기능으로 인해 함수형 컴포넌트에서도 클래스형 컴포넌트에서 사용했던 생명주기 메서드를 사용할 수 있게 되었다. 클래스형 컴포넌트에서는 생명주기 메소드를 사용할 수 있었는데, 이를 함수형 컴포넌트에서도 사용할 수 있게 되었다. 즉, 라이프사이클 훅을 대체할 수 있게 되었다. component..