📔 학습목표
- state의 동작원리 >> SetState
- 최신 데이터 다시 가져오기 >> refetch
- 목록에서 삭제하기 >> key/index
지난 시간 수업 코드리뷰
container / presenter 부모 자식 관계
게시판 등록해서 버튼 어쩌구
이해하고 넘어가기!!!!!
props drilling
드릴링이 많은 건 좋은 방법은 아니다.
props가 뚫고 지나간다고 해서 드릴링이라고 함.
JSX = 자바스크립트 XML
객체의 키와 밸류
둘의 이름이 항상 같아야 하는 건 아니다.
container의 리턴 안의 이벤트를 적어주고
presenter 매개변수에 props를 적어주고 이벤트 맨 앞에
props를 적어 연결해준다.
presenter의 스타일을 따로 styles 파일로 넘겨준다.
presenter에서 스타일을 넣어서 styles 파일에 적용하는 방법!
: 템플릿 리터럴 할때의 방식을 사용하면 된다.
리액트의 데이터 흐름은 단방향이다.
부모 - 자식의 관계를 헷갈리지 말자!!!!!!(어려워.....내꺼아닌 네꺼아닌 내꺼같은...너...)
결론!
각각의 컴포넌트이다.
그래서 자바스크립트 영역/ html 영역이 있다.
보드디테일 컨테이너가 보드뉴에도 임포트할 수 있다....
하지만 주소부분에서 주의해야 한다.
어떤 페이지에 임포트하느냐에 따라서 작동할 수도 있고 안 할수도 있다.
(언디파인드 할 수 있다는 뜻)
최종적으로 어떤 페이지에서 쓰일지를 잘 생각해야한다!!!!!!!!
(흑 어려워.....)
setState
내용이 다 채워지면 버튼이 활성화 (버튼색 변경)
isActive라는 props를 넘겨줌
인풋창이 다 채워지면 버튼이 활성화(노란색) 되고,
하나라도 비워진 상태면 버튼이 비활성화(회색) 되는 퀴즈
버튼 set~ 하는 부분에
조건문을 넣어서 칸이 다 채워졌을 때 활성화 되도록!!!
(주의!!! 순서에 상관없이 제목이든 작성자든 컨텐츠든 다 넣어야 활성화됨..)
setState에 값을 넣어도 바로 writer에 값이 들어가는 게 아니라
함수가 다 종료 되었을 때 값이 들어간다.
고로 writer 칸에만 'ㅊ'을 입력했을 시 값이 들어간 게 아니라 아직은 빈 문자열이다.
임시저장 공간으로 들어간다
다시 만들어짐 Re-render (리-렌더, 리렌더링)
==> 비효율적 ...(해결: setState는 임시저장에 넣어놈)
스테이트가 다시 만들어지면,
화면이 다시 만들어짐 다시 만들어지면서 값이 들어감.......
하......................................
use로 시작하는 애들은 컴포넌트가 다시 만들어져도
그대로 있음..?..응...
아직 빈 문자열이기 때문에
값 부분에 'event.target.value'를 넣어준다
핵심!
map
const classmate = ["철수","영희","훈이"]
const aaa = classmate.map((el) => <div>{el}</div>)
const aaa = [<div>철수</div><div>영희</div><div>훈이</div>]실무에서는 map과 filter를 많이 씀 (for문보다!!!)
배열을 담을 변수명은 대문자로 많이 쓰이고
단어끼리 붙일때는 언더바를 사용한다.
data?.fetchBoard 에 map을 적용
의 결과 값은
총 열 번 실행됨.
삭제를 눌러도 새로고침을 눌러야 삭제가 된게 보임
삭제버튼을 클릭하면 DB까지 가서 요청
하지만 내 화면은 지워지지 않는 현상 (동기화가 되지 않음)
-> refetch (리패치: 의미 -> 다시 엑셀에 있는 열개를 꺼내온다)
refetchQueries
: 삭제하고 나면 다시 가져와줘
map에서 중요한 부분
오류가 뜨는 이유?
map안에 맨 앞 태그 뒤에 key값이 없어서...
해결코드
<div>
{data?.fetchBoards.map((el) => (
// <Fragment key={el.number}>
<Row key={el.number}>
<Column><input type="checkbox" /></Column>
<Column>{el.number}</Column>
<Column>{el.writer}</Column>
<Column>{el.title}</Column>
<Column>
<button id={el.number} onClick={onClickDelete}>삭제</button>
</Column>
</Row>
))}
</div>index도 유니크한 값..?...
key = {index} 하면 오류창은 사라져도,
map에서 키를 index를 사용하면 안됌.
fragment에 키를 쓰고 싶으면
Fragment key={el.number}