리액트로 틱택토 게임 만들면서 기초 배우기 # 2 (리액트 VirtualDom 조작해보기)

---

 

 

이번 글을 통해 배워갈 내용

1. 리액트 몇가지 키워드 정의
2.  VS 코드를 활용한 몇가지 세팅

 

 

---

 

리액트의 정의

리액트는 사용자 인터페이스 구축을 위해 사용되는 자바스크립트 라이브러리 입니다.

Component 들을 이용해서 UI를 만드는 환경을 제공해줍니다.

 

 

진행하기에 앞서서 몇가지 중요 키워드들을 설명하고 가겠습니다

 

props

component들이 받는 매개변수

properties(속성들)의 약자입니다.

 

render

화면에서 보고자 하는 것들의 설명을 반환해줍니다.

리액트는 이 설명을 받아서 결과를 화면에 표시해줍니다.

 

JSX 

특별한 구문으로서 구조를 더 쉽게 쓰게 도와줍니다.

예시) <div />라는 구문은 빌드할때 React.createElement('div'>로 변환됩니다.

 

---

 

자 이제 다시 리액트 프로젝트를 계속 진행하겠습니다.

 

저번 강의에서 VS 코드를 연 부분으로 돌아와서

 

public 디렉토리의 index.html 파일을 보시면

 

id가 root인  div 태그가 보이실 겁니다.

 

리액트는 이 DOM 트리를 VIrtual Dom을 활용해 조작할수 있도록 도와줍니다.

 

DOM에 대한 개념이나 기초적인 HTML 문법, JS 문법이 부족하다고 생각되시면 

 

https://opentutorials.org/

opentutorials.org

생활 코딩을 읽고 와주시면 됩니다.

 

모르시는 상태에서 보시는 것보다 기초적인 내용을 보고 오시면 많은 도움이 될것이라 생각합니다.

 

간단하게 설명하면 HTML 태그안에 body 태그가 있고 이안에 div 태그가 있고 쭉 이어지면 태그들이 나뭇가지 처럼 쫘악 퍼진다고 생각하시면 그게 DOM 트리이고 이를 직접 조작하는게 아니고 가상으로 조작하는게 Virtual Tree 입니다.

 

 

src 디렉토리의 index.js 파일을 봅니다.

 

여기서 알아가셔야 하는 부분은 

 

document.getElementById('root')

라는 구문을 통해 아까 위에서 설명한 root라는 id를 가진 div를 가지고 와서

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

<App /> 이라는 것을 render한다는 것입니다.(화면에 표시한다는 것입니다)

 

 

App.js 파일을 보시면 아래와 같이 로고를 보여주고 Learn React라는 문구를 표시합니다.

 

 

 

 

전부 지워주고 에러를 방지하기 위해서

 

<>
</>

를 타이핑합니다.

 

그리고 보시면

위와 같이 화면에 표시되는 모든게 사라진것을 알 수 있습니다.

 

위에 지워진 화면에 틱택토 게임을 다음강좌에서 세팅해보겠습니다.

 

감사합니다.

 

 

 

---

 

코드보기

 

https://github.com/songk1992/react_tic_tac_toe_lecture

GitHub - songk1992/react_tic_tac_toe_lecture: 리액트로 틱택토 게임 만들면서 기초 배우기

 

---

 

참조 및 인용 문서

 

https://reactjs.org/tutorial/tutorial.html

Tutorial: Intro to React – React

---

https://codemasterkimc.tistory.com/50

300년차 개발자의 좋은 코드 5계명 (Clean Code)

 

---