1. 전체 리뷰
드디어 미지의 영역 리액트에 들어갔다.
걱정 했던 것보다 진도는 잘 따라갔지만 강사님 없이 혼자 하는 것은 익숙치 않아 힘들었다.
실습을 더 많이 해야지... 언제...
React 기초
react 특징
- 가상 DOM
- 변경 사항이 있을 경우 필요한 부분만 업데이트
- 컴포넌트
- 전체 프로그램을 작은 부분으로 나누어 재사용 가능
- JSX
- XML과 유사한 문법으로 가독성이 좋고 React의 요소를 쉽게 작성
HTML 문서를 리액트로 변환하기
- react-cra 프로젝트 생성
- pure.html 생성
Props
Props
-
읽기 전용(Read-Only)
-
엘리먼트가 생성된 이후 Props 값 변경 불가
-
객체 형태(키와 값으로 이루어짐) 컴포넌트에 전달
-
목록 데이터 사용 시 key 속성 사용
- 각 항목을 고유하게 식별하는 역할
- 중복되지 않는 고유한 값을 지정
- UUID : 전 세계에서 유일하게 식별할 수 있는 ID(고유 식별자)
Props 와 State
- 컴포넌트 간 단방향 데이터 전송 = props
- props 부모→자식 데이터 전달 시
- 데이터 변경 불가(read only)
- 컴포넌트 호출 시 attribute 사용
- 컴포넌트 내부에서 사용하는 state
- State
- 컴포넌트 내에서 관리하는 상태 값
- 데이터를 유동적으로 다룰 때 사용
- 데이터 변경 가능
- 변경을 알리는 useState 함수 사용
State
- 리액트 컴포넌트의 상태
- 컴포넌트가 자체적으로 가지는 데이터(변경 가능)
- 상태가 변경되면 컴포넌트가 다시 랜더링
- 렌더링 하지 않으면 화면 변화가 없음
- state에 저장된 값은 다시 렌더링 되어도 계속 기억
- 랜더링과 데이터 흐름에 필요한 값만 state로 사용
- useState 함수가 제공하는 상태 변수와 업데이트 함수 사용
- const [count, setCount] = setState();
- state에 저장한 count는 증가
- 일반 변수인 count2는 계속 새로고침되어 0
Component
Component
- 자바스크립트의 함수와 비슷한 기능
- element 생성될 때 생성된 값 전달
- component
- 첫 글자는 항상 대문자로 시작
- 소문자는 HTML 태그로 인식
- return 안의 모든 것을 JSX라 명칭
- JSX 내에서는 자바스크립트 코드를 { } 안에 작성
- 컴포넌트에 하나의 인자(props)만 넘길 수 있음
- props는 객체로 인자를 넘김
- 여러 개의 값을 적어도 props라는 객체로 넘기기 때문에 하나의 인자
- 여러 개의 값을 넘기려면 객체로 넘기기
- props는 객체로 인자를 넘김
Component 만들기
- 컴포넌트 생성
- Nav 컴포넌트 생성
- 객체 형태로 전달되므로 key로 사용
- 컴포넌트 합성
- 여러 개의 컴포넌트를 합쳐서 하나의 컴포넌트를 만드는 것
- 컴포넌트 추출
- 복잡한 컴포넌트를 여러 개의 컴포넌트로 나누는 것
- Comment(props)에서 img 항목을 Avatar로 추출
- 외부 파일 사용해보기
- 다른 사람의 컴포넌트 가져다 사용하기
- React Bootstrap 사이트 활용해보기
그외 참고 사이트
배우는중입니다.