VS Code 에서 작성
index.html 저장
결과 :
화면이 보이는 부분은 body 태크 안에 작성!
지금까지는 스타일을 입히지 않은 HTML만을 이용해서 만들어 봤다.
스타일을 입히기 위해서는 CSS를 사용해야 한다.
styles.css 저장
h1 태크의 text 색상을 초록색으로 변경하고 글꼴을 기울임꼴 스타일 적용
이후, HTML 파일에서 CSS 파일을 불러와야 한다. 이때 사용하는 태크가
link 태크이다.
link tag는 현재 html 파일과 외부 리소스 사이의 관계를 정의할 때 사용한다.
css파일을 불러오거나 웹브라우저의 탭에 나오는 아이콘인 favicon 같은 것을 넣기위해 가장 많이 사용된다.
주의할 것은 html파일과 css파일이 동일한 디렉터리에 위치해야 한다. 그렇지 못하면 파일을 찾지 못해 css스타일을 불러오지 못한다.
링크 태크의 href 부분에 경로를 styles.css로 입력했기 때문이다.
이제 완성된 웹사이트에 react.js 즉, react를 추가해보자!
첫 번째 단계로, 기존 웹사이트 HTML 파일에 DOM 컨테이너라는 것을 추가해야 한다.
앞에서 리액트의 장점으로 Virtual DOM을 이용한 빠른 업데이트와 렌더링에 대해 배웠다. 여기서 나오는 DOM이 들어있는 곳이 바로 DOM 컨테이너이다.
다른 말로 root DOM Node 라고 부르기도 한다.
Root라는 아이디를 가진 div 태크를 추가하자. 이 div 태크가 앞으로 DOM 컨테이너로 사용될 예정이다.
여기에서는 react와 react-dom 이렇게 2개의 JavaScript 파일을 가져온다.
그리고 앞으로 만들게 될 myButton이라는 이름의 react 컴포넌트를 가져오는 코드도 미리 만들어 놓자.
myButton 컴포넌트는 나중에 만들것이다.
여기까지 코드를 작성하고 브라우저에서 html파일을 열어보면 아무런 변화가 없다.
왜냐하면 아직 화면에 렌더링할 react 컴포넌트를 만들지 않았기 때문이다.
이 코드는 간단한 React의 함수 컴포넌트이다.
마지막 두 줄의 코드는 React DOM의 렌더함수를 이용하여 React 컴포넌트를 DOM 컨테이너에 렌더링 하는 코드이다.
이 코드가 필요한 이유는 스크립트 태크를 사용해서 컴포턴트를 가져왔다고 해도 컴포넌트가 화면에 보이는 것이 아니다.
이후 다음과 같이 버튼의 라벨이 Clicked 라고 바뀐 것을 볼 수 있다.
이것은 React 컴포넌트의 state가 변경되었기 때문이다.
<정리>
지금까지 HTML을 이용해서 간단한 웹사이트를 만들고 웹사이트에 React를 추가한 뒤, React 컴포넌트까지 만들어 렌더링을 해보았다.
하지만 React을 사용해서 웹사이트를 만들 때마다 매번 이러한 환경 설정을 해줘야 한다면 매우 번거롭다.
그래서 이 모든 과정이 필요가 없이 곧바로 React 웹 어플리케이션을 개발할 수 있도록 프로젝트를 자동으로 생성해주는 Creat React 앱이라는 패키지가 있다.
