1. React 라이브러리 설치 후 프로젝트 내에 불러오기
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이 적용된다.
이때 반드시 파일 확장자를 꼭 적어줘야 한다.
2. JSX
jsx는 babel에 의해 transcompile 된다.
Html 과 비슷한 개발 경험을 제공해 개발자의 생산성을 끌어올려줌.
장점
1 개발자의 편의성 향상
2 협업에 용이하며 생산성이 향상됨
3 문법 오류와 코드량 감소됨.
특징과 차이점
- html 태그 내에 javascript 연산 가능
- class -> className 입력
- 스타일은 object로 표현해야함. 중괄호
- 인라인으로 스타일을 적을 때 중괄호 2개.
- 첫번째 중괄호는 여기서부터 자바스크립트 표현 쓰겠다는 의미
- 두번째 중괄호는 자바스크립트 오브젝트 시작을 알리는 의미
- 꼭 카멜 케이스로 적기.
- font-size => fontSize
- 닫는 태그가 필수
- 최상단 element는 반드시 하나여야 함.
3. 컴포넌트
React에서 페이지 구성하는 최소 단위
이름은 대문자로 시작. Html element 와 구별하기 위함
Class와 function 컴포넌트로 나뉨
Controlled => input 들의 데이터를 state 를 통해 직접 관리
Uncontrolled =>데이터를 필요할 때 element로부터 긁어온다.
컴포넌트를 만들고 다른 컴포넌트에서 자유롭게 활용할 수 있다.
이름은 항상 대문자로 시작할 것
컴포넌트에 Attribute에 해당하는 부분을 props(properties) 라고 함
컴포넌트 안에 작성된 하위 element를 children 이라고 함
그리고 children은 결국에 props 중 하나임.
컴포넌트 특징
1 컴포넌트 끼리 데이터 주고받을 땐 props 이용
2 컴포넌트 내 데이터 관리할 땐 state 이용
3 데이터는 부모 -> 자식으로만 전달
4. Props (properties)
컴포넌트에 원하는 값을 넘겨줄때 사용
변수 함수 객체 배열 등 자바스크립트 요소라면 제한이 없다.
주로 컴포넌트를 재사용 하기 위해 사용한다.
절대 프롭스의 값을 임의로 변경해서 사용하지 말것.
프롭스의 값을 변경하고 싶다면 새로운 변수를 만들어서 변경할 것
- Props.name = props.name + “님” X
- New props = props.name + “님” O
5. Dom element Atrributes
1) 기본적으로 카멜케이스로 작성함
- className
2) data- 나 aria- 로 시작하는 어트리뷰트는 제외
- Data-type, aria-label 등
3) html 의 어트리뷰트와 다른 이름을 가지는 어트리뷰트 있음
- Class => className, for => htmlFor
4) html 의 어트리뷰트와 다른 동작을 하는 어트리뷰트가 있음
- Checked, value, style 등
- Checked 또는 value 는 html에서 초기값으로 사용되지만 react 에서는 현재값을 의미함
- checked값이 false로 고정돼있는 경우 사용자가 checkbox 클랙해도 값 변화가 이루어지지 않음
- 초기값의 의미로 쓰고 싶다면
- defaultChecked 와 defaultValue 사용
5) 리액트에서만 쓰이는 새로운 어트리뷰트가 있음
- Key, dangerouslySetInnerHTML 등
- key는 리액트가 어떤 항복을 변경, 추가, 삭제할지 식별하는 것을 도움
- 엘리먼트에 안정적인 고유성 부여하기 위해 배열 내부의 element에 지정해야 됨
- 배열 안 형제들 사이에서 고유해야함
- 전체 범위에서 고유할 필요 없음
- 두개의 다른 배열에서 동일한 키 사용 가능
- {key : ’1’ , value : ’minus’ }
- 값들 중 하나가 삭제됐을 때 정확히 어떤 값이 사라졌는지 알 수 있기 때문에 재랜더링 할 때 더 효율적으로 수행할 수 있다.
6. State
컴포넌트 내에서 유동적으로 변할 수 있는 값 저장함
개발자가 의도한 동작에 의해 변할 수 있고 사용자의 입력에 따라 새로운 값으로 변경될 수도 있음
State 값이 변경되고 재렌더링이 필요한 경우에 리액트가 자동으로 계산하여 변경된 부분을 렌더링 함.
1) state값 직접 변경 금지
- 값을 직접 변경하면 리액트가 컴포넌트를 다시 렌더링 할 타이밍을 알아차리지 못하므로 반드시 setState 함수를 이용해 값을 변경할 것.
- setState : 다시 렌더링해달라고 리엑트에 명령.
✅ state를 변경하는 방법
- setState() 내에 변경할 값 넣기
- const [count, setConunt] = useState(0);
- setCount(count + 1)
- setState() 에 함수 넣기
- const [count, setConunt] = useState(0);
- setCount((current) => {return current +1})
- 함수를 넣는 경우 함수가 반환(return)하는 값으로 state가 변경됨
현재값을 기반으로 state를 변경할 경우 함수 넣기를 권장함.
2) object를 갖는 state를 만들 때 주의사항
- 박스 안의 내용물을 변경하더라고 박스가 변경되는 것이 아니기 때문에 재렌더링이 일어나지 않음.
- 오브젝트 내부 값을 변경하려면 오브젝트를 새로 만들고 기존 내용 복사 후 원하는 값으로 바꾸면 됨.
- const [user, setUser] =
- useState({name: ’min’, grade:1}) //기존
- setUser((current) => {…current} //복사
- newUser.grade = 2 //변경
- Return newUser}) //반환
