리액트에는 html이 한개다.
리액트은 class를 쓰는것이 아니라 className을 쓴다.
컨텐츠가 없는 태그는 셀프클로징으로 < /> 잘 닫아줘야 한다.
리액트 라이프사이클
컨스트럭터 => 렌더 => 컴포넌트디드마운트
최상단태그가 필요할때는 빈태그로 묶어주자!
리액트는 SPA이다!
SinglePageApplication!
Html이 하나라는 뜻
라우팅은 리액트에 내재된 기본 기능이 아니다!
따라서 npm으로 받아서 써야함!
프레임워크 vs 라이브러리
간단하게 사용자의 위치에 따라 구분할 수 있다
프레임워크 > 사용자 : 사용자가 통제권이 없으면?? 프레임워크
라이브러리 < 사용자 : 통제권이 사용자에게 있으면?? 라이브러리
간단하게 말해서 막 가져다쓰면서 꾸미는 식이면 라이브러리 이고
이미 다 갖춰진 그런 생태계?? 에서 들어가서 사용하는 식이면 프레임워크 이다
개념이 좀 혼동하기가 쉬운데 나중에 더 자세히 알아보자 ~
--save: npm install을 할때 뒤에 --save 옵션을 붙여주는데 이는 dependencies에 저장하기 위함이다.
그냥 npm install 해도 dependencies에 들어가지만 이것은 우리 작업환경에서만 들어가는 것이고 나중에 협업하거나 그럴때 dependencies에 추가가되지 않기 때문이다
react-router-dom의 3요소
browserrouter, switch, route 3개가 필요함!
exact 정확한 경로를 정해주기 위해서 넣는다. 즉, 정확하게 이 주소에서 렌더링을 하라라는 의미.
route를 쓰면 App 대신에 route로 설정한다.
route 이동하기
2가지 방법이 있는데
link 컴포넌트를 쓰는방법과 withrouter를 쓰는 방법이 있다.
1.link 컴포넌트 사용방법
link to에는 route에서 설정한 경로를 넣어준다.
link 태그는 일종의 a태그라고 생각을하면 된다
하지만 리액트에도 a태그를 사용하기 때문에 이 둘의 구분이 이루어지는데 둘의 차이는 무엇일까??
link 태그를 쓰면 작업중인 페이지 내에서 이동하는 반면, a태그를 쓰면 다른 사이트로 이동한다.
이 둘을 적절하게 구분해서 잘 사용해야겠다.
2.withrouter 사용방법
withrouter 방식을 사용할때는 high order component 라고 해서 withrouter로 컴포넌트를 감싸준다.
그러면 이 둘 방법의 차이는 무엇일까??
link 컴포넌트 방법은 조건없이 그냥 라우팅한다, 보내준다.
하지만 withrouter 방법은 함수로 조건을 걸수가 있어서 동적으로 라우팅을 한다.
이벤트 안에서 쓰이는 this는 그 클래스를 가리킨다.
리액트 내에선 css가 충돌이 나기때문에 이를 방지하기 위해서 sass를 쓴다.
sass에서는 nesting이라는 걸 하기 때문에 중복될 가능성이 적다.
ex)
Main {
.login {
height: 200px;
}
}
이런식으로 ~
hover나 focus같은 가상클래스도 네스팅해서 사용할 수 있다.
최상단 클래스네임은 통일하는 편이 sass를 먹일 때 좋다.
컴포넌트 이름 = export 하는 이름 = 클래스 이름 싹 다 통일
sass에서는 변수선언하는 것도 가능하다
learn sass를 읽어봐라
