컴포넌트 입력 / 라이브러리 설치
우선 컴포넌트를 만들어서 렌더하기전에 경로의 개념부터 잡아보자.
src폴더의 index.js폴더에 들어가보면 이렇게 명령어가 나온다.
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';index.js에서 import해서 사용한다.
(내 안에서 만들어진게 아니면 전부 import해서 사용한다.)
앵간하면 건드릴 필요가 없는 파일이고, 저기 App이라는 컴포넌트에 우리가 만든 컴포넌트를 넣자.
그렇게 하면 app에 모든 컴포넌트 요소가 들어가고 root에 렌더가 되는것이다.
import로 react파일을 불러왔기때문에 cdn에서 사용하던것처럼 ReactDOM.render() 이렇게 사용을 안해도 된다.
app 안에 각 컴포넌트를 용도별로 나눠서 넣어줄것이다.
쓸데없는 요소들을 다 지운결과이다. 리액트는 굉장히 섬세한 프레임워크라, 저렇게 없는 쪽에 import 걸어놓은것들을 다 지워줘야한다 (안지워주면 github에서 배포할때 오류뜨는듯)
그리고 내가 사용할 컴포넌트들을 넣으려면 import로 연결시켜주고 넣어야한다.
예시
이런 식으로 사용되는 컴포넌트를 import로 연결시켜주어야한다. import가 됐다는 말은
export가 이루어졌단는 말이니, export하는법도 같이 살펴보자.
rfc라는 명령어로도 바로 입력가능하다, 이렇게 컴포넌트js안에 컴포넌트명도 js명과 일치시켜준다.
저 위에 import 경로가 몇개있는데 하나는 리액트로 경로연결을하여 명령어를 쉽게 사용하기 위함이고, 또 하나는 라이브러리이다. 컴포넌트를 작성할때 스타일을 미리 입혀서 작성할수 있게 하는 라이브러리이다.
styled-component 설치하기
npm i styled-components를 입력해보자.
오류가 떠버렸다.. 이럴때는 당황하지말고 구글링을 해보자.
나는 에러메시지가 떴을때 다음과 같은 과정으로 구글링을 진행을 한다.
-
오류메시지 복붙검색
-
그래도 안나오면 한글 or 영어로 구체적인 단어를 조합하여 검색
-
ai 활용
1번 방법으로 검색을 하니
이렇게 어떤 친절하신분이 해결법을 블로그에 게시를 해놨다.
버전 무문제 때문이라고 하니, 1번 혹은 3번안을 선택하여 설치하면 될듯하다.
성공적으로 설치가 된것을 확인할수있다!
사용하기 위해서는 잊지말고
@import styled from 'styled-components' 입력!
구글링을 해보니 이런 것도 발견했다. json파일에 입력하도록 하자.
