1. 자바스크립트 => 리액트
HTML, CSS, JS로 되어있던 기존의 인스타그램을 리액트 기반으로 만들기 위한 기초 작업
- JSX문법에 맞게 수정하기
- 컴포넌트 나누기
(login / Main - Nav, Feed, Mainright)
컴포넌트는 기능별로 나누어야 한다.
다행히도 옮겼을 때 깨지지 않았다.
2. 라우터 만들기
우선 CRA에는 라우팅을 위한 로직이 없어서 그에 대한 기능을 구현하기 위해 react-router를 추가해야한다.
npm install react-router-dom --save
라우터를 관리하는 파일 만들기
TheRouter이라는 모든 요소들을 넣을 파일을 만들었다.
path =" "안의 내용은 url으로 연결되는 부분
서버의 기본 주소가 http://localhost:3000/라면
http://localhost:3000/ 이 부분은 path ="/" 컴포넌트 Login으로 들어가고
따라서 http://localhost:3000/main 이렇게 치면 컴포넌트 Main으로 들어간다.
우선은 검색창에 이렇게 쳤을때 url이 내가 만든 컴포넌트 창으로 연결되는지 보아야 한다.
첫번째 방법. Link로 연결하기
1번의 상태에서 내가 만약 로그인을 누르면, http://localhost:3000/? 로 url이 바꾸는 것을 볼 수 있었다. 이것이 ?가 아니라 /main이 될 수 있도록 연결해주는 것이 Link
그런데 여기서 문제가 생긴다.
만약 우리가 단순히 링크를 연결하는 것이라면 이 방법으로 해도 되겠지만 이건 로그인이니까 다른 방법을 해야 할것 같다.
두번째 방법. history.push()
우선
import { withRouter } from "react-router-dom";를 위에 써줘야 한다. 그런데 왜 이걸 써줘야 할까?
우리는 this.props.history.push를 쓸 것인데
<Route path="/" exact component={Login} />
로그인 컴포넌트가 this.pros.history와 연결될 수 있다고 한다.
그 다음에는 우리가 어떤 버튼을 눌렀을 때, 그 버튼으로 우리가 원하는 페이지로 이동 되도록 해야 한다.
대상이 되는 버튼에 아래의 내용을 넣는다.
우리가 이것을 클릭했을 때, goToMain이라는 함수로 간다.
<button onClick={this.goToMain.bind(this)}>로그인</button>
let goToMain () => {
this.props.history.push("/main");
}
저것을 클릭했을 때, http://localhost:3000/main 으로 들어가는 것이다.
그리고 맨 아래에는 withRouter(컨포넌트 이름) 을 써야 한다.
export default withRouter(Login);3. 이벤트 _ 로그인 페이지
아이디, 비밀번호 각각 한글자 이상 했을 때, 버튼 활성화 되게 하기
작성한 코드
