- 이 기사는 Windows 환경을 기반으로 이루어집니다.
- * 이 기사는 마이크로소프트가 제공하는 비주얼 스튜디오에서 이루어집니다.
- * 생활 코딩에서 제공하는 인프라 무료 강의를 바탕으로 진행됩니다.
리액트의 컴포넌트를 만드는 방법과 리액트와 불변의 관계를 알아봅니다. – 강의 소개 | 인프라… www.inflearn.com
- React의 기본골자
- React를 이용하기 전에 기본적인 골자에 대해 알아보자.
- Public 폴더에 index.html 파일을 열어보면 아래와 같은 코드문이 나타난다.
그럼 <div> 옆에 id=”root”이라는 것이 붙어 있는 것을 확인할 수 있다.그런데 이전 글에서 개발 환경 웹을 열었을 때 뭔가 신비로운 원자가 움직이는 화면을 마주했을 텐데 index의 div 안에는 어떤 코드도 입력되지 않았는데 개발자 환경 도구를 열어 Elements를 확인해보면 다양한 코드가 적혀 있음을 알 수 있다.
index.html에는 아무런 입력도 하지 않았는데 개발 환경을 통해 보이는 웹에는 elements가 존재한다.2. 그럼 대체 어디서 코딩을 해놨으니 저게 저 모양이야?
2-1) JS에서는 우리가 웹페이지를 구성하고 수정하려면 어떤 파일에 수정사항을 입력해야 하는가?그럼 이제 src 폴더에 index.js를 열어보자. 그러면 우리는 특이한 코드를 하나 확인할 수 있다.이 코드문은 index.html에서 확인 가능했던 <divid=”root”>과 같이 id가 root으로 지정된 태그에 <App/>에 해당하는 Component를 불러오는 것이다.
Component에 관한 것은 이전에 태권도 리뷰 포스트에서도 설명하였으니 한번 읽어보는 것을 추천한다.
https://www.youtube.com/watch?v=2C1tXVHu9XQ( 출처 : 우아한 Tech – 브랜드 프론트 엔드로부터 … blog.naver.com
그럼 위에서 본 Elements는 어디에 작성되어 있나요? 라고 물으면 index.js상에 임포트된 파일이 단서가 된다. importAppfrom’./App’; 를 보면 동일한 경로에 App이라는 이름을 가진 파일의 정보를 import 한다고 해석할 수 있다.
그렇다면 Elements는 App.js에 있지 않을까? 라는 추측을 할 수 있다. 한번 확인해 보자
드디어 우리가 개발자 환경 툴에서 본 Elements가 여기에 존재함을 확인할 수 있다. React는 나중에 설명하겠지만, Eclipse를 사용할 때 기존의 html 파일이나 Jsp 파일을 사용할 때처럼 모든 요소를 파일에 직접 작성하기보다는 Component라는 것을 이용하여 코드를 경량화하고 결합도를 낮추는 역할을 해준다.
즉, 유지보수성을 높이고 재사용성을 높이는 작업을 진행하는 것이 React를 이용하여 웹페이지를 만드는 것!이라고 할 수 있다.
그러면 Elements의 위치를 알았기 때문에 App이라고 하는 Class가 하나 있는 것을 볼 수 있겠지만, 이 안에 Elements를 삭제하고 HelloReact 등의 문장을 써서 저장하면 새로 변경되는 페이지를 확인할 수 있을 것입니다.
나는 CSS도 모두 지운 상태에 다른 Component를 추가한 상태라 아닐 수 있다.2-2) CSS
CSS를 바꾸고 싶다면 JS와 마찬가지로 힌트가 되는 import를 확인해 보자.import’./index.css’; 를 보면, 같은 파일의 위치에 index.css를 import 하고 있는 것을 알 수 있다. 그렇다면 index.css 파일을 열어보자.
나는 어떤 css도 적용하지 않았기 때문에 비어 있지만 처음 열어본 사람들은 뭔가 적혀 있는 것을 확인할 수 있다.React의 CSS는 Eclipse에서 외부의 CSS 파일을 만들고 거기에 따로 style 요소를 넣어놓고 호출을 하는 방식으로 사용하는 것과 유사한 방식으로 구성되어 있다.
그렇다면 body 요소에 스타일 요소를 적용시켜보자.
JS 파일을 수정할 때와 마찬가지로 스타일 요소가 React 웹 개발 환경에 즉시 반영됨을 확인할 수 있다.