개발공부 회고 Log1

오늘의 배움

[생활코딩 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로 출력

1. 컴포넌트에 빈배열 생성
2. for 반복문, 배열의 length만큼반복
   -태그에 {해당 내용}을 넣어 push
3. return [배열]

태그를 반복하여 만들어낼때는 반드시 key props넣어주기
react가 해당 태그를 분별할 Id같은게 필요한다고 한다.

궁금한 점, 어려웠던 점

for 반복문이 과연 최선일까?
npm start 말고 다른 명령어들을 다른 강의에서 들었었는데 가물가물하다.
머리로는 이해가 가는데 뭔가 낯선 느낌. 직접 작성해봐야 더 와닿을 거 같다.

밤이 늦었으니 자고나서 내일 다시 봐야지

내일의 계획

생활코딩 6-10 수강 후 블로그 정리

방통대 강의 최소 3개 수강하기 (ㅠ)

소홀했던 것 같다.

중간고사 계획 세우기

오늘 로그 끝이고 책 읽다가 자야지