11~12일차를 한번에 업로드 할것이다.
실제 실습이 진행된 내용을 올릴것이고
내가 생각했을떄 문제가 될수도 있다고 생각하기 떄문에 혹시라도
문제가 일어난다면 바로 실습 자료는 삭제하도록 하겠습니다.
최대한 실습의 전체가 안나오게 올려보겠습니다.
React기본
React는 기본적으로 컴포넌트 단위로 프로그램이 이루어진다.
js파일을 작성한뒤 한곳의 html에 담아서 페이지를 로딩할떄 단 하나의 html만을 로딩하는 방식을 이용한다.
이론적인 내용은 코드스테이츠의 ur클래스를 참고해서 다시 학습해 보면 좋을껏 같다.
다시한번 언급하자면 이 블로그는 제 공부용이지 정보를 제공하고자 하는 용도가 아닙니다.
나 같은 경우에는 React를 터미널에서 실행을 하였다.
기본적인 React앱을 만들고자 한다면
npx install create-react-app [프로젝트 명]
를 입력해줌으로써 기본적인 React를 만들게 된다.
만약 Router까지 사용하고자 한다면
npm install react-router-dom
를 입력함으로써 모듈을 추가하면 된다.
이로써 기본적인 react를 만들었다.
나는 실습은 fork하여서 진행을 하였다.
기본적인 React설치법? 을 알아보았다.
이제는 React의 코드?를 봐볼 것이다.
- React에서 변수 또는 컴포넌트를 불러오는 방법이다.
dummyTweets라는 변수를 가져오는 코드이다.
- 가져온 변수는 따로 이런식으로 자유롭게 활용할수가 있다.
쉽게 설명하자면 그냥 다른 파일에 있는 변수도 import를 통해서 가져올수 있다는 말이다.
=> 이것은 js의 ES6문법에 해당된다.
이런 변수를 하나 만들었다고 하자.
이런식으로 사용 해야 한다.
- React에서는 컴포넌트로 관리를 하기 떄문에 변수를 직접 불러 와서는 안된다.
Counter() 같이 불러오면 안된다.
- 저렇게 불러오는 것은 컴포넌트로 불러온다고 말한다.
SPA
이제 부터는 SPA에 대해서 알아 볼 것이다.
SPA는 쉽게 말하면 부분적으로 작동하는 것이다.
유튜브와 같이 동영상을 누르면 동영상이 해당한 컴포넌트 부분만 작동을 하게 하는것이 SPA이며
동영상을 눌렀을떄 전체 페이지가 작동을 하는것은 SPA가 아니다 라고 한다.
- 이부분도 따로 용어가 있는데 무엇인지 까먹었다... ㅠ
이론적인 내용이기 떄문에 간단하게 부분적으로 작동하는 방식
이라고만 이해하고 넘어갔다.
Router
- React를 공부하면서 가장 재미있었던 부분이다.
Spring에서 url을 지정해 해당 페이지에 대한 처리를 해주는 것과 비슷하다
- 링크를 연결해주는 컴포넌트 이다.
이 부분도 전체 사진을 올리면 좀더 이해가 편하겠지만 문제가 될수 있기 떄문에 부분적으로 올려보겠다.
- 앞서 말한것처럼 특정 모듈?를 사용할떄에는 import 해주어야 한다.
- 앞서 부가 설명을 하자면 파일을 불러올떄, 변수를 불러 올떄에는 해당 파일의 위치를 지정해 주어야 한다.
위에 모듈 불러오는 것도 react-router-dom이라는 위치를 지정해주기는 한다.
- App.js에 있는 하나의 코드있다.
Route를 사용할떄에는 반드시 BrowserRouter안에서 사용해야 하며
Sidebar컨테이너에 Link가 담겨 있으니 컴포넌트로 불러온다.
- 뒤에서 추가하겠다 이부분은
이후 Switch문 안에 Route를 통해서 Link와 동일한 주소를 입력해 준다.
그다음 해당 주소로 들어왔을떄에 작동할 코드를 입력해 주면 된다.
- 이 사진에서는 Tweets라는 컴포넌트를 불러오게 만들어 주었다.
BrowserRouter 와 Switch도 같이 닫는 태그를 뒤에 추가해 주어야 한다.
- Sidebar에 있는 Link태그 있다.
앞에서 말한것처럼 주소를 통해서 Route와 매칭 해주면 된다.
후기
이것이 내가 2일동안 배운 React에 대한 부분이다.
아직 남은 공부할 것이 있고 이것도 차근차근 공부하여 정리를 해보도록 하겠다.
아마 단순하게 이글만을 읽는 분들(있을지는 모르겠지만)은 이해가 상당히 어려울 것 같다.
- 내가 글 재주도 별로 없고 코드가 전체적으로 보이지 않기 떄문에
결론적으로는 아직 재밌다!! 굉장히 흥미롭고 즐겁다!! ㅎㅎ
