1)import “패키지명”
Css 나 import 하는 것 만으로 역할을 하는 라이브러리 인 경우
패키지 명을 바로 import 한다.
2)import something from “패키지명”
기본적으로 패키지를 불러와 활용할 때에 할당할 이름을 작성
3)import {a , b} from “패키지명”
패키지 내 일부 메소드나 변수만 가져올 때 구조분해하여 가져오는 것이 효율적이다.
4)import as something from “패키지명”
패키지에 default로 export 되는 객체가 존재하지 않을 경우 as 이름 으로 불러올 수 있음.
별도의 css 파일을 작성 후 프로젝트에 적용하고 싶은 경우 import 할 경우 style이 적용된다.
이때 반드시 파일 확장자를 꼭 적어줘야 한다.
jsx는 babel에 의해 transcompile 된다.
Html 과 비슷한 개발 경험을 제공해 개발자의 생산성을 끌어올려줌.
1 개발자의 편의성 향상
2 협업에 용이하며 생산성이 향상됨
3 문법 오류와 코드량 감소됨.
React에서 페이지 구성하는 최소 단위
이름은 대문자로 시작. Html element 와 구별하기 위함
Class와 function 컴포넌트로 나뉨
Controlled => input 들의 데이터를 state 를 통해 직접 관리
Uncontrolled =>데이터를 필요할 때 element로부터 긁어온다.
컴포넌트를 만들고 다른 컴포넌트에서 자유롭게 활용할 수 있다.
이름은 항상 대문자로 시작할 것
컴포넌트에 Attribute에 해당하는 부분을 props(properties) 라고 함
컴포넌트 안에 작성된 하위 element를 children 이라고 함
그리고 children은 결국에 props 중 하나임.
1 컴포넌트 끼리 데이터 주고받을 땐 props 이용
2 컴포넌트 내 데이터 관리할 땐 state 이용
3 데이터는 부모 -> 자식으로만 전달
컴포넌트에 원하는 값을 넘겨줄때 사용
변수 함수 객체 배열 등 자바스크립트 요소라면 제한이 없다.
주로 컴포넌트를 재사용 하기 위해 사용한다.
절대 프롭스의 값을 임의로 변경해서 사용하지 말것.
프롭스의 값을 변경하고 싶다면 새로운 변수를 만들어서 변경할 것
1) 기본적으로 카멜케이스로 작성함
2) data- 나 aria- 로 시작하는 어트리뷰트는 제외
3) html 의 어트리뷰트와 다른 이름을 가지는 어트리뷰트 있음
4) html 의 어트리뷰트와 다른 동작을 하는 어트리뷰트가 있음
5) 리액트에서만 쓰이는 새로운 어트리뷰트가 있음
컴포넌트 내에서 유동적으로 변할 수 있는 값 저장함
개발자가 의도한 동작에 의해 변할 수 있고 사용자의 입력에 따라 새로운 값으로 변경될 수도 있음
State 값이 변경되고 재렌더링이 필요한 경우에 리액트가 자동으로 계산하여 변경된 부분을 렌더링 함.
1) state값 직접 변경 금지
현재값을 기반으로 state를 변경할 경우 함수 넣기를 권장함.
2) object를 갖는 state를 만들 때 주의사항