Today I try..
- 오후 2시쯤 모든 테스트케이스 완료.
- 오늘은 토이 프라블럼도 reference를 보며 이해하려고 노력을 함.
- react의 state 흐름 및 state 끌어올리기에 대한 이해가 더 커짐.
허나 좀 react로 더 복잡한 걸 많이 만들어봐야 어려움을 느끼면서 실력히 향상될듯 함.
Before you know..
react는 우선 상태관리를 위한 라이브러리는 아니다.
그러나 상태관리의 주요 원칙을 배우고 얘를 따라간다면, 컴포넌트간에 느슨히 결합된(loosed coupled)
구조적으로 아름다운 코드작성 가능하다.
상태(state)
프론트엔드에서는, UI에 동적으로 표현될 데이터.
ex) 쇼핑몰에서는 몇 개의 상태가 있을까?
🤔예상 답: 전체선택, 삭제, 전체삭제, 수량,
⭕답:
- 장바구니 추가
- 일반구매/정기배송 선택
- 선택여부 / 주문 금액 / 배송비
- 수량
side effect
함수나 컴포넌트의 입력 외에도 '함수의 결과에 영향을 미치는 요인.'
ex) 네트워크 요청, API호출등..
*presentation component
: react의 컴포넌트는, fetch같은 api 요청없이도 작동되어야 하기때문에,
가짜데이터(fakeData)일지라도 입력으로 표현될수있어야 한다.=> 이는 UI를 페이지단위가 아닌 컴포넌트 단위로 보는것이라는 원칙에 포함된다.
그러므로, side effect에 마냥 의존해서는 안된다는것이다. 허나, 때로는 불가피하게 api호출도 해야할거고, 의존적인 상태가 발생할수가 있다.
예를들어 '로딩중' 상태를 나타낼지 안할지의 여부는, 데이터의 전송여부에 달려있다.
*로딩중 상태도 언제나 개발자는 고려해야한다.
공식문서_ 주요개념 12. react로 사고하기
ex) react로 상품들을 검색할수있는 데이터테이블 만들기
- UI를 컴포넌트 계층구조로 나누기
: 우리가 할 첫번쨰 일은 모든 컴포넌트의 주변에, 박스를 그리고 그 각각에 이름을 붙이는것이다.
일단은 뭐 디자이너 포토샵레이어 이름이 컴포넌트이름 될수도있다.
- 한가지일을 하는 의미로 이름을 붙이는게 좋다.
- 하나의 컴포넌트 커지면 더 작은 걸로 분리해야한다.
예비개발자