[React] - [처음 만난 리액트] - 07. 직접 리액트 연동하기 (기존 웹 사이트에 직접 리액트 적용하기, create-react-app 미사용)

🧹 두서없이 적는 쉬운 정리

1. 기존 웹 사이트에서 React를 추가하려면 HTML 코드 속에 DOM Container와 리액트의 자바스크립트 파일들을 추가해야 한다.

2. 컴포넌트 작성 후 리액트 DOM의 reder() 함수를 사용해서 리액트 컴포넌트를 DOM Container에 렌더링 한다.

3. HTML에서 컴포넌트를 불러오고 실행하면 끝

 

(자세한 내용은 아래 참고)

 

 

 

---

 

 

📺 HTML과 CSS

리액트로 연동하기 전 HTML과 CSS를 이용하여 간단한 웹 페이지를 만들어보자.

 

---

✋🏻 React 추가하기

HTML에 DOM이 들어있는 곳인 DOM Container를 추가한다.

다른 말로는 Root DOM Node라고 한다.(Viturl DOM의 시작점)

 

여기에서는 'root'라는 ID를 가진 태그를 추가했다. 이 태그가 DOM Container로 사용될 예정이다.

 

🕵🏻 스크립트 파일 추가

다음은 스크립트 파일을 추가하여 리액트의 자바스크립트 파일들을 가져올 수 있도록 해준다.

여기에서는 리액트와 리엑트 DOM 이렇게 두 개의 자바스크립트 파일을 가져온다.

그리고 앞으로 만들게 될 'MyButton'이라는 이름의 리액트 컴포넌트를 가져오는 코드도 미리 넣어준다

(컴포넌트는 추후 만들 예정)

 

여기까지 코드 작성 후 html 파일을 열어보면 아직 아무런 변화도 없다.

왜냐하면 아직 화면에 렌더링 할 리액트 컴포넌트(MyButton)를 만들지 않았기 때문.

 

---

🧑🏻‍💻 리액트 컴포넌트 제작

MyButton.js라는 이름으로 파일을 만들고 코드를 작성한다.

아래 코드는 아주 간단한 리액트의 함수 컴포넌트이다.

 

마지막에 나오는 2줄은

리액트 DOM의 reder() 함수를 사용해서 리액트 컴포넌트를 DOM Container에 렌더링 하는 코드.

이 코드를 작성하지 않으면 스크립트 태그를 사용해서 컴포넌트를 가져왔다고 해도 컴포넌트가 화면에 보이지 않는다.

 

📺 결과 

html 파일을 브라우저에서 열면 버튼이 하나 보인다.

이 버튼이 바로 우리가 방금 만든 MyButton이라는 이름의 컴포넌트이다.

버튼 클릭 시 버튼의 라벨이 클릭 특 따고 바뀌는 것을 볼 수 있다.

이것은 리액트 컴포넌트의 State 가 변경되었기 때문이다.

(State에 대해서는에서 자세히 알아보도록 하겠다.)

 

 

 

 

위 내용은 '소플' 님의 '처음 만난 리액트' 영상을 참고하여 작성되었습니다.