.png)
오늘의 배움
[생활코딩 REACT]
- react npx create react app
- react 설치 수정 배포
- react props
오늘 생활코딩 REACT 1-5를 수강함.
이전 코딩앙마 REACT강의 보다는 좀 더 친절한 느낌이 들었다.
(코딩앙마를 들었기 때문에 그렇다고 느껴지는 건지 실제로도 그런건지는 잘 모르겠음)
디렉토리 생성
mkdir react-app✅ 디렉토리를 생성할 때 react라는 이름으로 만들면 오작동 할 수 있다.
react app 설치
npx create react app .✅ (.)으로 현재 디렉토리에 설치하겠다는 걸 표현
개발모드로 서버 열기
npm start터미널깔끔하게 지우기
command+C
단축키 까먹었다가 강의 들으면서 기억남
배포단계
- 빌드
npm run build- 서브
npx serve -s build컴포넌트 만들기
리엑트는 사용자 정의 태그를 만드는 기술이다
리엑트에서 소문자는 기본태그 사용자 정의 태그는 대문자(함수로 만들면 됨)
사용자 정의태그를 리엑트에서는 컴포넌트라고 한다.
app.js에서 컴포넌트 사용시
속성이 있는 경우
<Header></Header>속성이 없는 경우 이렇게 써주는 것이 더 좋음
<Header />props
<img src="./cat.jpg" alt="고양이" width="100" height="100">위와 같은 태그의 alt, src, width, height...등등 을 속성이라고 함.
이러한 속성을 react에서는 props라고 한다.
속성을 받아, 컴포넌트에서 인자로 활용할 수 있음
function()에 공간만 넣어주면 되는데 대부분 props라는 인자명을 사용
props라는 오브젝트에 속성(key)="value"를 받아올 수 있음
<Header title="REACT"></Header>props로 받았을 시에
props.title로 접근하면 React라는 값을 받을 수 있음
props로 접근하면 객체 {title: React}가 나올 것임
props로 배열값을 받아 배열 내용 list로 출력
- 컴포넌트에 빈배열 생성
- for 반복문, 배열의 length만큼반복
-태그에 {해당 내용}을 넣어 push - return [배열]
태그를 반복하여 만들어낼때는 반드시 key props넣어주기
react가 해당 태그를 분별할 Id같은게 필요한다고 한다.
궁금한 점, 어려웠던 점
for 반복문이 과연 최선일까?
npm start 말고 다른 명령어들을 다른 강의에서 들었었는데 가물가물하다.
머리로는 이해가 가는데 뭔가 낯선 느낌. 직접 작성해봐야 더 와닿을 거 같다.
밤이 늦었으니 자고나서 내일 다시 봐야지
내일의 계획
생활코딩 6-10 수강 후 블로그 정리
방통대 강의 최소 3개 수강하기 (ㅠ)
소홀했던 것 같다.
중간고사 계획 세우기
오늘 로그 끝이고 책 읽다가 자야지
