Bang's

알고있으면 좋은 React Tip✨ npm start 시 터미널에 bebel dependencies 오류 메세지 발생하는 경우 터미널에서 npm start를 입력하니 아래와 같은 문구가 발생되었다. 아래와 같은 문구가 발생 된 시점은? 등록 페이지에서 등록한 폼 데이터 중 이미지를 가져오려고 하는데 브라우저가 보안 제한으로 로컬 파일을 로딩하지 못하게 막고 있어 경로를 기존 server/uploads 에서 client/public/uploads 경로로 이동 후 재실행하니까 아래와 같은 문구가 터미널에 발생하였다. One of your dependencies, babel-preset-react-app, is importing the "@babel/plugin-proposal-private-property-..

알고있으면 좋은 React Tip✨ state란? 리엑트에서 이벤트에 의해 변경되는 동적인 값이다. state는 props와는 달리 하위 컴포넌트도 데이터를 변경할 수 있다. 버튼을 클릭하는 onClick 이벤트에 의해 값이 변경된 경우 사용된다. 함수형 컴포넌트는 'useState'라는 Hook 을 사용하여 state를 다룰 수 있다. (1)함수형 컴포넌트에서 useState 사용하기 state 값을 변경할 때는 반드시 setState를 사용하여 변경해야한다. setState를 사용한 경우, state값이 변경되면 useState가 변경을 감지하고, 자식 컴포넌트들까지 리렌더링이 발생한다. import React, {useState} from 'react'; function StateFunction()..

알고있으면 좋은 React Tip✨ Props란? properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다. 쉽게 말해, 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용하는 속성이다. 상위 컴포넌트가 하위 컴포넌트에 값을 전달하기 때문에 단방향 데이터 흐름을 갖는다. 부모 컴포넌트는 수정 가능하지만, 자식 컴포넌트는 읽기만 가능하다. (1)부모(상위) 컴포넌트에서 Props 지정하여 넘기기 함수형 컴포넌트는 말 그대로 자바스크립트의 "함수(function)" 기반 컴포넌트이다. import React from 'react'; // 컴포넌트를 불러온다. import 컴포넌트명 from './컴포넌트명'; const root = ReactDOM.createRoot(document..

알고있으면 좋은 React Tip✨ 컴포넌트(component)란? 리액트는 화면에서 UI 요소를 구분할 때 '컴포넌트'라는 단위를 사용한다. 쉽게 말하면 리액트에서 앱을 이루는 가장 작은 조각이라고 할 수 있고, 레고 블록으로 집을 쌓게 된 경우 하나의 블록이 '컴포넌트'라고 할 수 있다. 컴포넌트는 새로운 컴포넌트를 생성할 수 도 있고, MVC 의 뷰를 독립적으로 구성하여 재사용할 수 있다. 리액트의 중요한 핵심인 '컴포넌트'에는 함수형 컴포넌트, 클래스형 컴포넌트 2가지가 있다. (1)함수형 컴포넌트 함수형 컴포넌트는 말 그대로 자바스크립트의 "함수(function)" 기반 컴포넌트이다. 함수를 선언하듯이 function 으로 컴포넌트를 정의하고, return 문에 JSX 코드를 반환한다. Hook..

알고있으면 좋은 React Tip✨ 리엑트(React) 개요 데이터 변경이 잦은 복잡하고, 규모가 큰 라이브러리에 적합하다. 사용자와 상호 작용이 가능한 동적 UI 제작 가능하다. 전체적인 틀이 아닌 하나의 기능만을 도구처럼 제공하며, 필요한 도구(라이브러리)를 가져와서 사용한다. 리엑트는 ui를 만드는 기능만을 제공하기 때문에 라이브러리라고 할 수 있다. 리엑트(React) 설치 및 세팅 기본적으로 node.js를 설치해야 한다. 공식 사이트 : https://nodejs.org/en (1) Create React App 을 이용해서 React 설치 React 앱을 만들 폴더를 생성한다. npx create-react-app ./ 또는 npx create-react-app 폴더명 이때 폴더명은 대문자 ..