리액트 공부 정리

사용한 기술 스택들:

 

React - 생활코딩

리액트 특징: 사용자 정의 태그 만들기

 

src/index.js 에서 쓰여 있는 데로 npm start가 작동됨

 

npm run build를 실행하면 빌드가 되고 npx serve -s build를 그다음에 실행하면 배포용 웹이 실행이 된다

 

태그들의 모음을 함수로 만들고 그 함수를 또 다른 태그/컴포넌트로 사용이 가능하다

 

prop: 우리가 만든 태그의 속성

- kwargs느낌이라고 생각하면 될듯하다

 

속성을 출력 하려면 중괄호 안에 넣어줘야 제대로 된다. 중괄호가 없으면 object가 아니라 string이 전달됨

 

자동으로 react에서 생성한 값들은 key라는 prop이 있어야지 성능이 올라간다

 

state를 사용해서 이미 정의된 변수의 값을 변화시켜 페이지에 반영을 할 수 있다.

 

primitive data type이 아니면 ...으로 복사 후 setValue하기

 

prop의로 받은 값은 바꾸지 못하기 때문에 update할 때는 state로 변환을 해준다

 

리액트를 다루는 기술

빈 태그는 그룹핑 용으로 사용 가능

- 자바스크립트 변수 안에는 하나의 태그만 들어가야함

- <Fragment> 과 동치

 

undefined를 return하면 오류가 생기기 때문에 조심하자

- 하지만 jsx안에서 undefined를 rendering하는 것은 가능하다.

 

리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어 주어야 한다.

- camelCase 적용

 

jsx에서 css 클래스를 사용할 때는 class attribute 대신에 className을 사용한다.

 

{/*  */}를 사용하면 페이지에 보이지 않지만 //이나 /*을 사용하면 그대로 나타나게 된다

 

클래스형 컴포넌트와 함수형 컴포넌트의 차이

클래스형:

• 조금 더 복잡함
• state 바로 사용 가능

함수형:

• React에서 권장함
• 선언하기가 간단하다
• 메모리를 적게 사용한다
• state와 lifecycle API 사용 불가
  • Hook으로 해결 가능

 

 

 

React - 생활코딩 (opentutorials.org)

React - 생활코딩

더북(TheBook): 리액트를 다루는 기술 [개정판]

리액트를 다루는 기술 [개정판]