![]()
참고자료 https://stackoverflow.com/questions/33381029/how-to-pass-html-tags-in-props 문제 발생 props로 html 태그를 전송하고 싶었지만 실패하였다 문제 해결 1. html 태그를 배열로 감싸 전달한다 2. html 태그 양 끝에 따옴표를 제거하고 태그만 남긴다. 해결 방법 1번 2번 중 골라 사용하면 된다. 만약 문자열 + 태그 + 문자열 과 같은 방식이라면 배열로 감싸 전달을 해야한다 결과 잘 전달됨
![]()
문제발생 리액트에서는 페이지 이동을 원할 때 a태그를 사용을 권장하지 않는다. 이유 - 1. 페이지 새로고침 방지, 2. 내부라우팅, 3. 브라우저 히스토리 관리 위와 같은 이유로 리액트에서는 라우터(Router)라는 라이브러리를 사용하여 페이지 이동을 권장한다. 그렇다면 라우터는 어떻게 사용할까? 문제해결 1. 라우터 다운로드 npm install react-router-dom 2. index.js 수정 (라우터 적용) import React from "react"; import ReactDOM from "react-dom/client"; import { BrowserRouter } from "react-router-dom"; // 라우터 라이브러리 임포트 import "./index.css"; imp..
![]()
위와 같은 CSS 파일이 있다고 가정하자. 파일 관리의 필요성과 컴포넌트 재사용성을 높이기 위해 styled-components 를 도입하기로 하였다. 기존 CSS 파일을 어떻게 styled-components로 변환해야 할까? 방법은 간단하다. CSS 선택자인 클래스 이름으로 styled-componet를 생성하면 된다. 이후 각 선택자들의 CSS스타일을 각 styled-component에 붙여넣어주면 된다.
![]()
문제 발견 위와 같이 img 태그 컴포넌트에 src 경로를 직접 설정하면 에러가 발생한다. 이에 넣을 이미지 파일의 경로를 import 하여 props 형태로 전달해야한다 문제 해결 이미지 경로를 import 하여 props 형태로 전달한 결과 에러가 발생하지 않음을 볼 수 있다 결과 이미지가 잘 삽입 되었다.
![]()
문제발견 "리액트 컴포넌트에 부트스트랩을 이용한 스타일링은 어떻게 할까?" 문제해결 1. public / index.html 에 부트스트랩 시작을 위한 코드를 추가한다 https://getbootstrap.com/docs/5.3/getting-started/introduction/ 2. 적용하고 싶은 컴포넌트에 클래스를 이용하여 부트스트랩 스타일링을 한다 https://getbootstrap.com/docs/5.3/layout/columns/ 결과
