오늘은 wecode에서의 React 첫번째 수업이다.
수업을 듣기전에는 생활코딩을 통해 어느정도 베이스를 이해하였고,
첫번째 수업을 통해서 아래의 학습목표를 달성할 수 있었다.
🚀 학습 목표
- 어떠한 흐름으로 오늘날 React가 많이 사용되고 있는지 설명할 수 있다.
- React가 무엇인지 정의할 수 있다.
- CRA를 설치하고 폴더와 파일이 어떻게 구성되어 있는지 설명할 수 있다.
- Component의 개념과 종류에 대해 설명할 수 있다.
- JSX 를 정의하고 기본 특성에 대해 설명할 수 있다.
- 기존에 구현한 Westagram을 React 로 변환해 렌더링 할 수 있다.
📝 Mentor's Tip
- 리액트는 개념을 많이 공부해도 코드로 옮기기 전까지는 이해하기 어렵습니다. 세션에 참여하거나 온라인 강의를 듣거나 블로그를 보며 공부를 할 때 무조건 코드로 따라 치면서 학습해주세요.
- 개념이 부족해도 기존에 바닐라 자바스크립트(순수 자바스크립트)로 구현한 westagram 을 리액트로 옮기면서 내가 짠 코드를 통해 개념을 학습하는 것이 훨씬 도움이 많이 됩니다.
- 기존에 바닐라 자바스크립트로 구현한 것과 리액트로 구현한 것을 비교하며 왜 리액트의 장점은 무엇이고 단점은 무엇인지, 컴포넌트는 어떻게 나누며 JSX 의 특징은 무엇인지 정리하면서 과정에 참여해주세요! 기존의 기술과 새로운 기술의 차이를 몸소 느낄 때 비로소 여러분 것이 됩니다.
세션 정리
1. 왜 리액트를 사용하는가?
프레임워크란, 기술에서 사용해야하는 구조같은것들이 이미 set 되어 있다.
따라서 그 안에 방식대로 개발해야하는 룰이 있다.
하지만 라이브러리는 그냥 도구들이 모임으로 정해진 규칙이 없고 내가 만들어가는 것이기 때문에 보다 자유롭다.
또한 FB의 지속적 관리 및 생태계가 활성화 되어 있다는 (사용자가 많고 커뮤니티가 활성화되어있어서 reference들이 많이 있다.) 큰 장점이 있다.
다만,라이브러리인 리액트는 오로지view만 담당하기 때문에 내장되어 있는 기능은 부족하지만 third-party 라이브러리를 함께 사용한다. (예를 들면 Redux, react-router!)
2. 리액트란 무엇인가?
UI를 만들기 위한 js 라이브러리로써 매번 업데이트 되는 UI를 개발자가 직접 업데이트 할 필요 없이 자동으로 업데이트 해준다.
또한 리액트는 절차적이지 않고 선언적이다.
(예를 들면 청소할때 청소기 돌리고 걸레질하고… 이렇게 일일이 다해주는게 아니라, '뭐가 하고싶다' 라는 완성하고 싶은 UI에 대해 선언해 준다(완성되면 이렇게이렇게되야 한다). 그렇게되면 react 에서 그것을 그려주고 우리는 데이터만 업데이트 해주면 된다는 편의성을 갖추고 있다.
참고로 리액트는 Virtual DOM을 통해 UI를 업데이트 한다.
3. Setting: node.js & nom
1) Node.js 란?
자바스크립트가 브라우저 밖에서도 (ex.서버) 동작하는게 하는 환경 == 탈웹이라고 한다.
프로젝트 개발 환경을 구축하는 주요 도구들이 node.js 기반이다
2) Npm 이란?
노드 패키지 매니저로 노드를 사용할 수 있도록 하는 다양한 앱이 있는 플레이스토어라고 생각하면 된다.
3) CRA 이란?
리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구이다.(toolchain)
리액트는.UI기능만 제공해서 개발자가 직접 구축해야하는게 많다. 따라서 처음 시작 단계에 직접 개발환경을 구축하기 어렵기 떄문에 CRA를 쓴다.
4. CRA를 설치후, 폴더와 파일의 구성
node.modules는 너무 용량이 크므로 ignore에 올려주고 다른 개발자들은 npm 인스톨하면 자동적으로 개발환경에 필요한 것들을 다운받아준다. 또한 Node modules는 라이브러리 소스 코드들이 들어있다.
src에는 components, pages, styles가 들어간다.
( 이 부분은 앞으로 프로젝트를 하면서 잘 지켜줘야 할 부분이라 따로 정리해서 자세하게 다룰 예정이다. )
5. Component의 구성
component사용시에는 함수형(function)과 클래스(class)표현이 있다.
현업에서는 함수형을 더 지향한다고 하는데 우리는 프로젝트 기간동안 class로 component를 만들 계획이다.
다만 둘의 차이점이 무엇인지는 짚고 넘어가자면, 함수형은 안에 render가 없다는 것 이다.
class component의 기본 문법으로는
class (파일명) extents React.Component{
render(){
return <div className = "App"></div>; //jsx로 작성
}
}function component의 기본 문법으로는
function App(){
return <div className = "App"></div>;
}class으로 쓰거나 function으로 쓰게 될 경우의 차이를 제외하고는 아래의 사진처럼 component할 경우 꼭 들어가야 하는 틀은
1)import
2)component
3)block
4)export
가 들어간다는 것 이다.
오늘의 과제를 하면서 어려움을 느꼈던 점은
1) css파일과 js파일중에 누가 상위폴더여서 어디에 import를 주고 export줘야 하는지 ?
2) App.js에는 모든 파일을 import해줘야 하는지 ?
3) 이미지나 사진등의 경로를 변경하는 점
(public에 있는 이미지 파일 폴더의 경우에는 상위폴더 필요없이 /images/파일명.png 라고 쓰면 해결이 되었다.
4) html header에 삽입했던 폰트 주소는 어디에 모아야 하는가? (우리는 body부터 복사해서 가져왔으니까.)
1) css파일과 js파일중에 누가 상위폴더여서 어디에 import를 주고 export줘야 하는지 ?
우선, css파일은 export를 줄 필요가 아예 없다는 것!
그리고 js파일은 각 css파일을 import하면 되는데
보통 같은 파일에 위치하므로 현재 경로인 './'을 해서 찾아줄 수 있다.
2) App.js에는 모든 파일을 import해줘야 하는지 ?
아니다!
모든 파일은 App.js가 아닌 index.html에 모아줘야 한다.
다만, css파일은 -> js파일에 묶여있으므로
각각의 js파일만 index에 아래처럼 묶어주면 된다.
지금은 Sass를 이용하지 않았기 때문에 동시에 렌더할 수 없어서 main 페이지 혹은 login페이지 둘중 하나만 렌더 가능하며
ReactDOM.render(
<Login / 혹은 Main />, document.getElementById('root')
);이렇게 처리해야 원하는 파일을 react를 통해 볼 수 있다.
3) 이미지나 사진등의 경로를 변경하는 점
(public에 있는 이미지 파일 폴더의 경우에는 상위폴더 필요없이 /images/파일명.png 라고 쓰면 해결이 되었다.
**4) html header에 삽입했던 폰트 주소는 어디에 모아야 하는가? (우리는 body부터 복사해서 가져왔으니까.)
폰트주소는 index.html에 모아주면 되고, 따로 표시해야 하거나 바꿔야 할 부분은 없다.
