개발/React

React에서 텍스트 줄바꿈하는 간단한 방법 (\n 줄바꿈 처리)

종종 개행 문자('\n')가 포함된 문자열 데이터를 받아서 사용하는 경우가 있습니다. JSX에서 개행 문자를 받았을 때 줄바꿈 처리를 하는 방법은 간단합니다. 일반적으로 그대로 사용하면 JSX에 의해서 개행문자나 태그는 동작하지 않고 그대로 출력합니다. const str = "안녕하세요.\n 여기는 대한민국입니다."; // 안녕하세요. 여기는 대한민국입니다. 이때 간단하게 CSS white-space 속성을 활용하면 해결할 수 있습니다. white-space: pre-line; const str = "안녕하세요.\n 여기는 대한민국입니다."; // 안녕하세요. // 여기는 대한민국입니다.

개발/React

타입스크립트로 리액트 함수형 컴포넌트 작성하는 방법

시작 전에 함수형 컴포넌트에 대해 알아보기 전에 이 글을 보시는 분들은 사전에 리액트 프로젝트가 설치되었다는 가정하에 진행합니다. 만약 리액트 프로젝트가 설치되지 않았다면 리액트 프로젝트 설치 후 진행해 주세요! # React CRA npx create-react-app my-app --template typescript # or yarn create react-app my-app --template typescript # Next.js npx create-next-app@latest --typescript # or yarn create next-app --typescript 함수형 컴포넌트 만들기 리액트에서 타입스크립트를 사용하지 않고 함수형 컴포넌트를 만드는 방법은 아래와 같습니다. 화살표함수나 일반..

개발/React

React Hooks: useState() 사용법 | 예제를 통해 제대로 이해하자 (Examples of the useState Hook)

React Hook은 React 16.8버전에서 새로 추가된 API입니다. Hook은 기존에 리액트 클래스 컴포넌트를 작성하지 않아도 함수형 컴포넌트에서 state 특성을 활용할 수 있습니다. useState Hook? 리액트는 컴포넌트 state를 통해 변경된 데이터를 관리합니다. 리액트 Hook이 등장하기 전에 state를 클래스 컴포넌트(Class Component)에서 사용했습니다. import React, { Component } from "react"; // React 클래스 컴포넌트 예시 export default class Hello extends Component { state = { count: 0 }; render() { return hello, {this.state.count}; }..

개발/React

[React] 부모-자식 컴포넌트 간 데이터 전달 방법 (Passing Data Between a Parent and Child in React)

React에서 부모 컴포넌트와 자식 컴포넌트 사이에 데이터가 전달되는 방식에 대해 알아보겠습니다. 데이터가 갈 수 있는 방향은 두 가지이며 다음과 같습니다. 부모 -> 자식 자식 -> 부모 부모에서 자식으로 데이터 보내기 (Passing Data From Parent to Child) 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달해야되는 경우 props를 사용하면 쉽게 해결할 수 있습니다. 예를 들어 부모와 자식이라는 두 개의 컴포넌트가 있고 부모의 상태를 자식에게 전달하려고 한다고 가정해 보겠습니다. 다음과 같이 할 수 있습니다. // Parent Component import Child from "./components/Child"; export default function App() { retu..

개발/React

React-helmet Maximum call stack size exceeded 버그 수정

개인 프로젝트를 진행하는 도중에 maximum-call-stack-size-exceeded 에러를 마주하게 되었는데, 코드를 아무리 분석해봐도 디버깅을 할 수 없었다. 그러던 와중에 deep-equal이라는 부분에서 에러가 남을 뒤늦게 확인하고 디버깅을 시작했는데 아뿔사 component -> actionCreator -> reducer -> component 에서 데이터를 새로 바인딩하는 도중에 에러가 발생한 곳이 hoc로 구현해놓은 react-helmet 부분이었다.. 정말 어이가 없다. 해결 방법은 굉장히 심플하다. Before: test After: children 구문으로 jsx 파싱을 하지 말란다. 아래는 에러가 발생한 구문 소름돋는건 development 모드에서는 재현이 안되고 produc..