1주차 | 리액트 기본 개념 & 시작 화면 만들기
리액트 기본 개념
1. nvm 설치하기
설치 완료
2. 돔(DOM) 개념
html의 단위 하나하나를 객체로 인식
3. 스코프 (저장 범위)
const, var, let 모두 블록 함수이다.
본인 블록 밖에서 값을 가지지 못한다.
4. 스프레드 연산자
[ ... ]이라고 쓰며 어떤 객체 안에 있는 요소들을 객체 바깥으로 꺼냄
5. .map
맵은 요소들을 배열해서 새로운 배열로 만들어준다.
6. .filter
원하는 조건을 붙혀서 재배열
(리턴값에 트루인 요소들만 배열에 넣는 방식으로)
7. .concat
배열에다가 뭔가를 합쳐주는 친구
다른 이름으로 저장하는 식
8. Set() 자료형
중복 값을 삭제함
new Set( 이 안에 중복된 배열 넣어줌 )
-> 요거 다시 스프레드 연산자 써서 빼면 됨
9. .from
1) 하나의 문자를 배열로 만들어주거나
2) 새로운 배열을 만들거나
3) 배열 껍데기를 만들기도 함
render() { }
화면에 보여지는 함수 - 렌더링!
이렇게 추가한 App.js (부모 요소) 안의 컴포넌트.
그럼 render( )안에선 위에 있는 this.state를 그대로 가져와서 쓸 수가 있다.
데이터, 즉 컴포넌트가 App.js 에 기록이 되었기때문에
자식 컴포넌트인 BucketList에서도 props를 찍어준다.
퀴즈!
정답은 -
BucketList.js에서 list를 써주면 값을 받아온다. 왜일까?
부모 컴포넌트(App.js) 에서 list를 썼었기 때문이다.
