오늘 해야 할 일
- react-router-dom v6 적용하기
- 메인-상세 페이지 연동하기
- 팀과제 하기 (V)
오늘 공부한 코드
https://github.com/hyoungwonkang/TIL/commits/main
오늘 배운 것
생활코딩 강의에서 스파르타와는 또 다른 리액트 접근법에 대해 배웠다. 조금 더 직관적인 이해가 되었다.
설치:
- 크롬 콘솔 엘리먼트에서 id="root"로 되어있는 것은 index.js에 document.getElementById('root')에서 찾을 수 있다. (여러 미니 코드사이트에서 쓰이지만 정작 몰랐던 부분)
- index.js의 css는 index.html에서 찾는다. 'root'는 index.html에서 id='root'로 지정 된다.
배포:
- 터미널에서 serve -s build: 웹서버의 옵션인 -s는 사용자가 어떤 경로로 들어오든 index.html로 들어오게 하는 것.
- 배포용 소스코드는 공백이 불필요 하기 때문에 1줄로 구성 된다.
- serve는 node.js로 만들어진 App.
컴포넌트:
사용자 정의 태그의 과정. 사용자 정의 태그 = 컴포넌트
- 함수를 정의: 리액트는 대문자 필수. 태그명을 가져온다.
- 리턴값으로 html 코드를 리턴하면 된다.
props:
- 리액트는 자동으로 생성하는 태그의 경우 리액트가 태그들을 추적해야 하는데, 추적 근거로써 key라고 하는 약속된 prop을 부여한다. 그리하여 리액트의 정확성을 높여준다.
event:
- 추가 보충 필요
state:
- 어떤 글을 선택했는지 그것을 또 state로 만들 필요가 있다.(코드 참조)
오늘의 공부 키워드
그룹핑: 연관된 것들을 정리
prop: 태그에 속성 넣기
prop은 컴포넌트를 사용하는 외부자를 위한 데이터
state는 컴포넌트를 만드는 내부자를 위한 데이터
리액트는 부품공장
설치 수정 배포 개발의 3대장
index.js : 전역적인 설정
npx serve -s build : 배포용 페이지 만들기
리액트는 대문자 필수
prop은 지엽적
동적 태그: li, ol
key: Application 전체에서 고유한게 아닌 반복문 안에서 고유함
장황하니 화살표 함수
useState: 배열을 리턴하고 그 배열의 0번째 원소는 상태의 값을 읽을 때 쓰는 데이터. 1번째 데이터는 그 상태의 값을 변경시 쓰는 함수
사람. 편하게.