👩‍💻 개발/🖥 FRONTEND

[React] 부모에서 자식, 자식에서 부모 값 전달하는 방법

리엑트를 쓰다 보니 부모에서 자식으로 값을 전달할 일이 많았다. 이때에는 props를 통해 전달하면 되었지만 반대로 자식에서 부모로 전달하는 방법은 어떻게 해야 할지 몰라 찾아보던 중 알게 된 김에 포스팅을 해보고자 한다. 1. 부모에서 자식으로 값을 전달 props 란? -상위 컴포넌트에서 하위 컴포넌트로 값을 전달하는 수단 -하위 컴포넌트에서 상위 컴포넌트가 전달 한 값에 접근 가능 하게 함 -반대로는 불가능 ::상위 컴포넌트 import React, { useEffect, useState } from 'react'; import Reviews from './Sections/Reviews'; const StoreDetail = () => { ); }; export default StoreDetail;..

[React] 함수형 컴포넌트 생명주기

리엑트는 클래스형과 함수형으로 컴포넌트를 생성할 수 있으나 함축적인 프로그래밍이 가능한 함수형 컴포넌트를 사용한다. 하지만 함수형 컴포넌트는 생명주기를 별도로 구현해야 한다는 점이 유일한 단점인데 이도 React Hook의 useEffect를 이용하여 간편하게 구현할 수 있다. 그리하여 이번에는 생명주기를 정리해보고자 한다. useEffect useEffect(() => { //코드 }) : 모든 컴포넌트가 리렌더링 될 때마다 실행 componentDidMount() useEffect(() => { //코드 },[]) : 한번만 실행 componentDidUpdate() & getDerivedStateFromProps() useEffect(() => { //코드 },[props 및 state 명 (, 여..

[React/JavaScript] Promise 값 가져오기

리엑트로 프론트를 작업하던 중 특정 데이터를 호출하여 띄워주려고 하는데, 자꾸 에러가 떠 콘솔로 확인을 해보니 이러한 형식으로 데이터가 나온다는 사실을 확인했다. Promise가 무엇인지 여기서 Result에서 데이터만 뽑아낼 수 있는 방법이 무엇인지 적어보고자 한다. 1. Promise 란? Promise는 비동기 작업의 단위 이자 비동기 처리에 사용되는 객체이다. 여기서 비동기 처리란? 특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것이다. 예를 들면, 화면에서 서버로 데이터를 요청했을 때 서버에서 응답을 주지 않는다고 해서 기다리기만 한다면 엄청 오랜 시간을 기다려야 한다. 그리하여 미리 나머지 코드를 실행 후 응답이 오면 실행을 완료해주는 것이다. -1) Promis..