이 문서에서는 가장 기본적인 문서인 튜토리얼과 트러블슈팅 문서를 작성하는 방법을 알려드려요. 문서를 작성할 때 주의해야 할 점과 개선할 수 있는 부분을 함께 살펴봐요.
이 튜토리얼 문서는 데스크톱에서 가장 안정적으로 보여요.
이 문서에서는 React를 처음 접하는 초보 개발자를 대상으로 'React 컴포넌트 만들기'라는 튜토리얼을 개선해 볼 거예요. 개선 전과 개선 후를 비교하면서 어떤 부분이 개선됐는지 살펴보세요.
학습을 위한 문서는 독자가 새로운 기술이나 도구를 배울 수 있도록 돕는 문서예요. 이 문서에서는 구체적인 예시, 실행 가능한 코드, 성공적인 경험을 제공해야 해요.
# React 컴포넌트 만들기 1React 컴포넌트를 만드는 방법을 알아봅시다. ## 함수형 컴포넌트 함수형 컴포넌트는 다음과 같이 만듭니다. 2function Welcome() { return <h1>Hello</h1>;} 3## Props 사용하기 props를 사용하면 컴포넌트에 데이터를 전달할 수 있습니다. function Welcome(props) { return <h1>Hello, {props.name}</h1>;}이 문서에서는 특정한 질문이나 이슈를 해결하기 위한 문서를 개선해 볼 거예요. 개선 전과 개선 후를 비교하면서 어떤 부분이 개선됐는지 살펴보세요.
문제 해결을 위한 문서는 독자가 특정한 문제를 해결하기 위한 문서예요. 이 문서에서는 문서가 해결하려는 문제, 질문을 명확히 하고 해결 방법을 구체적으로 제시해줘야 해요.
1# Hydration 오류 해결하기 Next.js에서 클라이언트와 서버의 렌더링 결과가 불일치하면 Hydration 오류가 발생할 수 있어요. React에서는 `useEffect`를 활용해 특정 데이터를 클라이언트에서만 다르게 처리할 수 있습니다. ## 해결 방법 2function TimeComponent() { const [time, setTime] = useState(0); useEffect(() => { setTime(Date.now()); }, []); return <p>현재 시간: {time}</p>;} `useEffect`를 사용하여 클라이언트에서만 특정 코드를 실행하도록 수정하고, 서버 렌더링과 클라이언트 렌더링이 동일한 결과를 출력하도록 코드를 수정해요.