2021 04 06
생활코딩 React 강의 / https://www.youtube.com/watch?v=XMb0w3KMw00&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi
코딩애플 React 기초 / https://www.youtube.com/watch?v=nahwuaXmgt8&list=PLfLgtT94nNq1e6tr4sm2eH6ZZC2jcqGOy&index=2
공식문서 / https://ko.reactjs.org/docs/getting-started.html#try-react
React는 페이스북에서 개발한 JS 기반의 라이브러리이다.
React의 핵심은 Component 기능으로, Component의 조립을 통해 웹앱을 쉽게 구축할 수 있게 한다. 이를 통해,
1. 가독성
2. 재사용성
3. 유지보수
의 이득을 취할 수 있다.
생활코딩에서는, CODING -> RUN -> DEPLOY의 세 단계로 나누어 진행한다.
1. React 개발환경 세팅
npm은 Nodejs로 만들어진 프로그램들을 위한 일종의 앱스토어이다. React 설치를 위해서는 npm이 필요하다. 간단하게, Nodejs의 안정화된 최신버전을 설치하자.
이후 IDE의 터미널을 열어, 사용할 경로로 이동한 후에 npx create-react-app . (혹은 원하는 이름)을 입력한다. 이것이 공식문서에서 추천하는 방법임을 알아두자.
만약 사용자권한을 요구한다면, sudo npm install create-react-app . 이라 입력해보자.
이후 정상적으로 설치가 되었는지 확인하고, 경로에 파일이 생겼는지도 확인했다면 설치 완료.
이도저도 안된다면 온라인에서 React 환경을 따라할 수 있는 사이트들이 공식문서에 링크되어있는 것을 기억하자.
2. 샘플 WebApp 실행
이후 터미널에서 npm run start를 입력하면 브라우저에 간단한 샘플 사이트가 실행된다. 터미널에 있는 네트워크 주소를 주목하자. 저곳으로 들어가면 내가 개발중인 앱의 모습을 볼 수 있다.
3. React의 구조
프로젝트를 진행하면서 주로 사용하게 될 폴더는 'src' 폴더이다.
index.js 파일의 모습이다. 중간에 <App /?> 이라는 것이 보인다. 이것이 바로 React의 Component이다. JS의 document.getElementById로 'root' id를 호출하고 여기에 <app /?> 이라는 Component를 적용한 것이다.
이 App이라는 Component를 수정하기 위해서는 App.js라는 파일을 수정하면 된다.
이렇게 App.js 파일의 내용을 수정해주면,
무려 실시간으로 App component를 적용한 부분이 바뀌는 것을 볼 수 있다. 실시간으로.
파일의 구조를 더 뜯어보면, app.js-app.css 이렇게 한 짝을 이루고 있는 것을 알 수 있다. 즉, app.js는 Component의 내용을 담고 있는 파일이며, app.css는 이 Component의 css, 꾸밈을 담당하는 파일이다.
4. React build
우리가 WebApp을 만들 때, 즉 build 할 때에는 npm run build 명령어를 사용한다. 이를 처음 사용하면 build라는 디렉토리가 생성되고, index.html이 있다. 이를 열어보면,
이렇게 띄어쓰기도 없고 알아보기 힘든 코드가 들어있다.
이는 불필요한 공백이나 에러를 제거한 코드이기 때문인데, 게임에서 텍스쳐 optimize하는 것과 비슷한 맥락이라 생각하면 될 것 같다.
serve -s build
npx serve -s build이 명령어는 serve라는 임시 서버를 다운 받아서 실행 시킬 때 'build'라는 디렉터리를 document root로 사용하겠다 라는 뜻이다. 웹에서 테스트 하고 싶을 때 사용하면 좋을 듯하다.
5. React 가 없다면?
<@header><@/header>와 같이 시맨틱 태그를 적용한 순수 HTML코드이다. 지금은 보기 편할지 몰라도, 과거 프로젝트들 처럼 코드 수가 많아지면 이러한 시맨틱 태그만으로는 보기가 복잡해진다.
만약 이렇게 <@subject><@/subject>로 간단하게 관리할 수 있다면 어떨까? 이를 가능하게 하는 것이 React인 것이다. Component 기능이고.
6. Component를 만들어보자.
간단하게 Component를 만들어보았다.
이를 통해, Component 안에 또 다른 Component를 넣을 수 있다는 것과 Component는 '반드시' 최상위 태그가 필요하다는 것을 알 수 있다. Subject의 경우에는 <@header>, App의 경우에는 <@div>가 최상위 태그이다.
Component를 보는 첫번째 시선은 '정리도구'로 생각하면 좋다.
6-1. Component를 만들어보자. props
props란, Component 내부의 내용을 {this.props.값}의 형태를 이용해 Component 외부에서 내부 내용을 간편하게 바꿔줄 수 있는 기능을 얘기한다. 즉, 어디서 값 받아온다고 변환하고 받아아오고 이럴 필요 없이 Component 밖에서 이름과 값을 정해주고 내부에서 값을 받아주면 우리 마음대로 편하게 Component의 내용을 바꿀 수 있는 것이다. 와...
위 App Component의 첫번째 Subject와 두번째 Subject는 하나의 Component지만 외부의 전달하는 값이 다르기 때문에 다른 결과물을 보여준다. 하나의 Component로!
6-2. React Developer Tools
생활코딩님의 말씀에 따르면, 현재 상태와 문제를 찾아낼 수 있는 도구이다. 브라우저의 개발자 도구에서 React 관련 코드들을 확인 할 수 있게 해준다. 바로 아래처럼.
그저 감탄사 밖에는...
6-3. Component를 파일로 분리해보자.
Component를 파일로 분리하여 따로 관리하게 되면 각 Component별로 다루기가 쉬워질 뿐만 아니라 다른 파일에서 Component를 import하여 사용하는 것도 훨씬 쉬워진다. 말 그대로 젠가 블록을 따로따로 넣어놨다가 사용하는 것 처럼 파일을 따로 모아 보관하면 된다.
위 사진과 같이 따로 파일을 생성하여 export default 이름을 적어 준 후, 사용하고 싶은 곳에서 import 이름 from "디렉토리"로 불러주고 사용하면 된다.
이럴수가...
생활 코딩은 수, 목요일까지 완료하고 나머지는 틈틈이 봐야겠다.
