개발자
import React from "react"; import { ReactHTML } from "react"; import ReactMarkdown from 'react-markdown'; import { useState } from 'react'; const asdf = (props) => { const markdownContent = ` # 시작 블라블라블라 - 순서 없는 목록 1 - 목록 1.1 - 목록 1.2 - 순서 없는 목록 2 ` return ( <Container> <ContainerContent> <ReactMarkdown>{markdownContent}</ReactMarkdown> </ContainerContent> </Container> ) } export default asdf; const markdownContent ='' 안에 마크다운 양식이 적용이안됩니다 ㅠㅠ 왜이럴까여...
답변 2
우선 react-markdown의 사용법을 확인해 보았을 때 문제는 없어보입니다. https://github.com/remarkjs/react-markdown 1. asdf 컴포넌트를 제대로 사용하고 있는 것이 맞는지 2. css에서 마크다운이 적용되지 않도록 덮어쓰고 있는것은 없는지 확인해보셨으면 합니다. 질문 올려주신 코드를 보면 <Container>와 <ContainerContent> 컴포넌트가 있는데 이런 컴포넌트 내에서 마크다운이 동작하지 않는 것일 수도 있습니다. 하지만 질문만 보았을 때 이 부분을 확인하기 어렵네요. react-markdown이 제대로 동작하는지 확인을 위해서 npx create-react-app my-app 한 기본 리액트앱에서 app.js 파일을 다음과 같이 변경했을 때 문제 없이 나옵니다.
1import logo from './logo.svg';
2import './App.css';
3import ReactMarkdown from 'react-markdown';
4
5function App() {
6 const markdownContent = `
7 # 시작
8 블라블라블라
9 - 순서 없는 목록 1
10 - 목록 1.1
11 - 목록 1.2
12 - 순서 없는 목록 2
13 `
14 const markdown = `A paragraph with *emphasis* and **strong importance**.`
15 return (
16 <div className="App">
17 <header className="App-header">
18 <img src={logo} className="App-logo" alt="logo" />
19 <ReactMarkdown children={markdown} />
20 <ReactMarkdown>{markdownContent}</ReactMarkdown>
21 </header>
22 </div>
23 );
24}
25
26export default App;
안녕하세요! 마크다운이 적용되지 않는 문제에 대해 도움을 드리겠습니다. 마크다운 컨텐츠를 React 컴포넌트에서 렌더링하려면 'ReactMarkdown' 컴포넌트를 사용해야 합니다. 그러나 주어진 코드에서는 'ReactHTML'를 임포트하고 있고, 'ReactHTML'은 React의 내장 요소를 포함하고 있지 않습니다. 다음과 같이 코드를 수정해보세요: 아래의 코드에서는 'ReactMarkdown'을 올바르게 임포트하고, 마크다운 컨텐츠를 'ReactMarkdown' 컴포넌트로 감싸고 있습니다. 이렇게 수정하면 마크다운이 올바르게 렌더링될 것입니다. 또한, 컴포넌트의 이름인 'asdf'를 'Asdf'로 변경하였습니다. React 컴포넌트는 대문자로 시작해야 하기 때문에 이에 맞게 수정해주셔야 합니다. 이 수정 사항을 적용하면 마크다운이 올바르게 렌더링되는 것을 확인할 수 있을 것입니다.
1import React from "react";
2import ReactMarkdown from 'react-markdown';
3import { Container, ContainerContent } from 'react-bootstrap'; // 필요한 컴포넌트를 임포트하세요.
4import { useState } from 'react';
5
6const Asdf = (props) => {
7 const markdownContent = `
8 # 시작
9 블라블라블라
10 - 순서 없는 목록 1
11 - 목록 1.1
12 - 목록 1.2
13 - 순서 없는 목록 2
14 `;
15
16 return (
17 <Container>
18 <ContainerContent>
19 <ReactMarkdown>{markdownContent}</ReactMarkdown>
20 </ContainerContent>
21 </Container>
22 );
23};
24
25export default Asdf;
커리어리 AI 봇의 답변을 평가해 주세요!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!