Frontend/React

JSX 상에서 라우팅 함수를 잘못 쓰는 바람에 발생한 오류로, onClick={navigate(path)}을 onClick={()=>navigate(path)}으로 바꾸면서 해결되었다. 참고) 오류가 난 코드(예시) import {useNavigate} from "react-router-dom"; const ComponentEx () { const navigate = useNavigate(); return ( Go Main ); } 참고) 오류가 해결된 코드(예시) import {useNavigate} from "react-router-dom"; const ComponentEx () { const navigate = useNavigate(); return ( navigate("/")}>Go Main ); }

이후에 원인을 알아서 다시 작성하겠다. 오류가 나는 경우는 아래처럼 컴포넌트 내에 이벤트를 선언하면서 useNavigate를 바로 호출한 경우이다. import {useNavigate} from "react-router-dom"; const Comp = () => { const handleEvt = () => { useNavigate("/"); } } 오류가 해결된 방법은 useNavigate를 바로 호출하는 것이 아니라 한번 변수에 담아서 사용한 방법이다. import {useNavigate} from "react-router-dom"; const Comp = () => { const navigate = useNavigate(); const handleEvt = () => { navigate("/");..

리액트는 자체적으로 라우팅 기능을 제공하지 않기 때문에, 추가적인 모듈을 사용해야 하는데, 여기에는 대표적으로 react-router-dom이 있다. react-router-dom 모듈을 사용하는 방법은 간단하다. 먼저, 1) 전체 DOM을 렌더링하는 최상위 html을 'react-router-dom'에서 제공하는 BrowserRouter로 감싸준다. 예를 들어, 최상위 컴포넌트가 '#root'인 경우에는 아래와 같이 작성할 수 있다. (아래는 최상위 컴포넌트 js 파일이다.) import {BrowserRouter} from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ..

npm install이 안되었을 때 package.json을 읽지 못해 발생하는 문제다..! npm install을 해줌으로써 해결되었다.

useState() : state 사용 시 state의 값을 변경할 때 사용 가능 useEffect() : state 사용 시 state의 값이 변경됐음을 감지 가능 (예시) Buttons는 여러개의 버튼을 한번에 나타내는 상위 컴포넌트이다. 단일 버튼을 렌더링하는 컴포넌트 Button은 상위 컴포넌트 Buttons로부터 props인 array, count 등과 함께 이를 수정할 수 있는 setter를 함께 전달받아 그 값을 계속해서 변경될 수 있게 한다. Button 컴포넌트가 렌더링하는 button들을 클릭할 경우 발생하는 clickEvent 함수에서는 props들의 값을 변경시키는데, array의 경우에는 계속해서 새로운 배열을 만드는 것이 목표가 아니라 하나의 배열에 값을 쌓는 것이 목표였기 때문..

React가 데이터 변경에 따라 렌더링을 변화시키는 과정은 다음과 같다. 1. Props를 전달받음 2. shouldComponentUpdate 함수 호출 3. 가상 DOM과 실제 DOM을 비교해 변경된 부분만 다시 렌더링 State의 특징은 '불변성'이다. 가상 DOM과 실제 DOM을 비교하여 변경된 부분만 리렌더링한다고 할 때, 해당 컴포넌트가 달라졌음을 판단하는 것은 값을 가지고 판단을 한다. 만약, {key: 1, name: 이름1}의 형태인 데이터를 {key: 1, name: 이름2}로 변경했다고 해보자. 데이터는 결국 같은 객체이나, 그 내부의 속성이 변한 것으로 이 둘을 같은 객체, 같은 상태로 여겨 리렌더링해주지 않을 수 있다. 불변성이란, 값을 변경시키지 않고 새로 만드는 것이다. 때문에..

State 이전 글에서 소개한 리액트의 props는 props를 사용하는 컴포넌트를 호출하는 부모 컴포넌트에서 그 값을 전달해주고, 해당 컴포넌트는 그 값을 변경할 수 없다. 반면에 state는 컴포넌트 내부에서 변경될 수 있는 값을 의미한다. 2021.11.11 - [React] - React) props란? React) props란? props란 properties의 약어로 컴포넌트 속성을 설정할 때 사용하는 요소이다. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있고, 해당 컴포넌트 자신은 이를 변경할 수 u-u002.tistory.com 리액트에서는 컴포넌트를 생성하는 방식이 두 가지 존재한다. 컴포넌트 종류에 따라 클래스형 컴포넌트에서는 state 그대로, 함수형..

props란 properties의 약어로 컴포넌트 속성을 설정할 때 사용하는 요소이다. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있고, 해당 컴포넌트 자신은 이를 변경할 수 없다. props는 컴포넌트의 JSX를 리턴하는 부분에서 클래스형 컴포넌트의 경우에는 'this.props.props명', 함수형 컴포넌트의 경우에는 'props.props명'의 형태로 사용할 수 있다. 1) defaultProps props 값을 따로 설정하지 않았을 때 보여줄 기본값을 설정하는 것으로, defaultProps는 해당 컴포넌트 자신의 파일에서 설정할 수 있다. 2) children props의 종류 중에 부모 컴포넌트에서 해당 컴포넌트 태그 사이에 전달하는 내용을 값으로 삼는 것을..

1. 컴포넌트 생성 방식 // 함수형 생성 방식 (1) function ComponentName() { return ( // HTML 삽입 ) } // 함수형 생성 방식 (2) const ComponentName = () => ( // HTML 삽입 ); // 클래스형 생성 방식 class ComponentName extends Component { // 이 때 상속받는 Component는 react.Component render() { return( // HTML 삽입 ) } } export default ComponentName; App.js 생성한 컴포넌트들을 최상위 컴포넌트인 App에 추가함으로써 원하는 위치에 렌더링할 수 있다. index.js ReactDOM.render함수는 컴포넌트를 페이지..

1. 빌드(빌드 파일 생성) 빌드 시 build 디렉토리 내부에 compressed 형태의 파일들이 생성된다. 기본적으로 개발이 진행되는 리액트 프로젝트는 제법 큰 용량을 지니는데, 이 용량을 그대로 사용자가 사용하게 될 경우 프로그램이 지나치게 무거워진다. 이를 대비해 빌드 시에는 압축된 형태의 파일들로 생성되게 된다. 이 build 디렉토리 내부(웹 서버가 document를 찾는 경로)에 파일들을 위치시키면 실 서버 환경 구축은 완료되는 것이다. npm run build 2. 웹 서버 다운로드 serve는 npm을 통해 설치할 수 있는 간단한 웹 서버이다. 'create-react-app'을 통해 리액트 프로젝트를 생성할 때 'create-react-app .' 명령어를 사용했던 것 처럼 serve ..