react

The `style` prop expects a mapping from style properties to values, not a string 오류

뜻 : 당신이 style prop에 값을 넣어야하는데 문자열을 넣었다. 왜 이런 오류가 뜰까? 말 그대로 style에는 CSS 코드 자체가 들어가야하는데 문자열을 넣었기 때문이다. 나는 classname에 적용한다는 것은 style에 작성해버렸다. 1. 오류가 난 코드 {/* {quizdata[0].choices} */} {quizdata[0].choices.map((choice) => ( {choice.text} ))} 2. 수정한 코드 {/* {quizdata[0].choices} */} {quizdata[0].choices.map((choice) => ( {choice.text} ))} className에 지정해야할 것은 style에 직접 넣은 것이 아닌지 확인해보자.

React의 조건부 렌더링을 사용하는 6가지 방법

0. 조건부 렌더링과 초기 코드 리액트를 배울 때 state를 배우자마자 익혀야 할 것이 있습니다. 바로 "조건부 렌더링" (Conditional Rendering)입니다. 특정 값에 따라서 다른 컴포넌트를 그리고 싶을 때 사용하는 방법으로, 웹 상에서 여러 방법을 확인할 수 있습니다. 글을 작성할 기본 코드는 아래와 같습니다. App.js import React, { Component } from "react"; import "./App.css"; class App extends Component { constructor(props) { super(props); this.state = { isLoggedIn: true, }; } render() { return ( 조건부 ..

(React 다국어 웹 만들기) 2. 다국어 변환을 돕는 모듈 설치(react-i18next와 i18next)

0. 모듈 설치 이제 react에서 사용할 국제화를 도울 모듈을 설치해야한다. 2개인데 react-i18next와 i18next이다. npm i react-18next i18next 공식 사이트에는 --save를 넣으라고 하지만, npm 5 버전부터는 자동으로 dependency에 추가해주기 때문에 입력할 필요가 없다. 설치된 이후에 JSON 파일을 체크해보면 된다. 설치 매우 잘된다. 1. 기본적인 t 함수 사용법 위에서 설치한 모듈을 사용해보자. 기본적인 사용 방법은 다음과 같다. import i18n from "i18next"; import { useTranslation, initReactI18next } from "react-i18next"; i18n .use(initReactI18next) .i..

(React 다국어 웹 만들기) 1. Vite를 통한 React 프로젝트 세팅

프로젝트 세팅 터미널에서 yarn create vite를 통해 vite 세팅을 실행시키고, 메뉴에서 React -> Javascript 스택을 입력한다. Vite를 통해서 만든 프로젝트는 임의로 다른 실행 명령(script)이 삽입되어있다. 확인해보고 해당 명령어를 쳐보자. 오류가 날 경우 만약에 vite command not found가 뜰 경우에는 vite 모듈이 설치가 안되어 있는 것이다. npm i vite@latest로 과감히 최신 버전을 설치한다. npm install vite@latest 테스트 프로젝트에 특정 버전을 명시하는 것은 하남자 특이다. 설치한 이후에 개발 실행(dev)을 해보면 아래와 같이 뜬다. 이렇게 웹 페이지가 뜨면 정상적으로 프로젝트가 세팅되었다.

React에서 동적으로 스타일링하기 (삼항연산자, CSS 적용)

리액트에서 강력한 부분이 바로 조건부 렌더링이다. 조건부 렌더링에 대해 알아보기: https://ko.reactjs.org/docs/conditional-rendering.html 조건부 렌더링 – React A JavaScript library for building user interfaces ko.reactjs.org 이 부분은 JSX에서만 적용되는 것이 아니라 CSS 스타일링에서도 적용이 가능하다. 아래는 예시이다. import React, { useState } from 'react'; import Button from '../../UI/Button/Button'; import './CourseInput.css'; const CourseInput = props => { const [entered..

리액트를 공부하는 순서와 공부해야할 것들, 샘플 프로젝트 추천

리액트로 몇 가지 프로젝트를 진행하면서 공부해야 할 체크리스트를 만들어봤습니다. 본인이 리액트를 공부하면서 아래의 목록을 모두 할 수 있는지 확인해 보는 것도 좋겠네요. 첫 번째, 리액트의 기초 개념에 대해서 (초급) 리액트를 하다보면 엄청나게 많은 의존 모듈을 설치하게 됩니다. 상태관리를 Context API에서 redux로 넘어가는 것처럼, 리액트가 가지고 있는 기능만으로는 빠르게 기능을 개발하기 어렵습니다. (그만큼 생태계가 잘 되어 있다는 뜻이겠죠.) 리액트 자체만 놓고 보면 초보 단계에서는 4가지를 공부해야 합니다. 1. 컴포넌트와 UI를 만드는 방법 : 여러분이 직접 컴포넌트를 만들어보는 것입니다. 컴포넌트를 만들고 컴포넌트끼리 결합하세요. 양쪽 컴포넌트에서 서로를 호출하고, 한쪽을 포함시켜 ..

React 프로젝트 시작하는 여러가지 방법

1. CRA npx create-react-app 프로젝트명 -> 원래는 npm install -g create-react-app을 한 후 create-react-app을 실행해야하지만, npx로 바로 모듈을 실행할 수 있다. 2. yarn을 이용한 방법 yarn은 npm install -global yarn으로 설치한다. yarn create react-app ./ yarn start 3. vite을 이용한 방법 1) NPM 방법 npm 버전 6일 때 npm create vite@latest 프로젝트명 --template react npm 버전 7이나 그 이상일 때 (-- 가 한 번 더 들어감) npm create vite@latest 프로젝트명 -- --template react 2) Yarn 방법 ..

(React 만들기) 09. 리액트 Hook 원리와 제약사항들

이전글: https://moneytech.kr/63 (React 만들기) 08. virtual DOM (가상 DOM - 문서 객체 모델) 1. 가상 돔 개발자들이 DOM을 직접 건드리지 않고 훨씬 더 쉬운 구조물로 UI를 개발할 수 있도록 중간에 DOM처리는 리액트에게 맡기고 개발자는 JSX만 개발하면 될 수 있도록 하는 것. 리액트는 실제 moneytech.kr 1. Hook Hook의 규칙: https://reactjs.org/docs/hooks-rules.html#gatsby-focus-wrapper Rules of Hooks – React A JavaScript library for building user interfaces reactjs.org 리액트 훅은 class를 사용하지 않아도 stat..