라이브러리를 사용 시 코드를 복사하면 안되는 경우가 많다.
수능 문제 푸는 프로그램
테스트 할땐 잘 되지만 베포하면 안되지? 하는 문제가 있습니다.
알고보니 사용법을 잘 모르고 있었던 것.
보안문제 적용을 안해서 생긴 문제(원래 있던 내용이지만 모른경우)
결국 원리를 제대로 알아야된다.
state 작동원리도 더 자세히 알아봅시다.
doce 설명서를 제대로 읽고 원리를 파악하는데 중점을 두자
목록조회(조회하자)와 삭제
원리에 따라 삭제해야 제대로 삭제가 됩니다.
부모컴포넌트에서 자식컴포넌트로 props를 넘기는 것이다.
boards/new에서 다 합쳐져서 실행될 때 아직 router에 들어갈 정보는 언디파인드다.
router.qeury.boardId 는 어디에 import 되냐에 따라 오류가 날수도 있다.
디테일페이지는 import되더라도 주소가 /boardId 주소에 넣어져 있기 때문에 router.query.boardId => undifined 가 나온다.
1. 파일 분리해서 합침 props
2. props로 부모,자식 컴포넌트 간에 넘겨줄 수 있다.
3. 주소를 보고 라우터가 실행되는데 한 페이지에 합쳐져 실행 됐을때 가지고 올 수 있는 상황이면 실행되고, 없는 상황이면 undifined가 뜬다.
setState 원리
emotion
state는 바로 바뀌지 않고 리액트에서 한번에 일괄적용시키려고 임시저장소에 저장하고 함수가 끝나고 적용함.
즉 임시저장공간에 모아 마지막걸 일괄적으로 렌더링함
setState를 구동하는 함수가 끝나야 렌더링이 된다.
그래서 qq qq qq 한개씩말고 2개를 찍어야 작동합니다. state값이 바로 바뀌지 않는 이 문제를 해결하려면 title을 가져오지말고 event.tatget.value값을 바로 집어넣으면 됩니다.
게시글 목록과 삭제
Map
map으로 게시글 목록과 삭제
const classmates = ['철수','훈이','영희']
classmates.map(el => el + "어린이")
소괄호 생략 가능?? 불가능?
소괄호 생략 가능!! 단 객체로 리턴은 생략 불가능! {} 가 괄호로 인식되기 때문에..
map과 html의 연결
리액트가 이 구문을 인식하고 아래와 같이 그려준다.
객체도 동일하다.
백앤드 데이터는 객체로 가져오기 때문에 위와같이 map으로 가져오면 된다.
Key
key={el.number} // 인텍스는 게시글을 삭제할 때, 다음 게시글이 올라오면서 기존 인덱스와 동일한 값을 갖게 됨. 즉 유일하지 않음0.
fragment에 키 주는 법
<Fragment key={el.number}> <Fragment> * < key="></> => 이렇게는 안된다.
Index
import { Test } from '../../src/test2';
export default function Test2() {
const List = ['사과', '딸기', '바나나'];
return (
<>
{List.map((data) => (
<Test key={id}>{data}</Test>
))}
</>
);
}map에는 index도 설정할 수 있다.
.map((el, index) => el + '어린이', index)
Index를 Key로 줘도 괜찮은 상황
index를 key로 줘도 괜찮은 상황이 있습니다. 아래 3가지 조건을 만족하면 됩니다.
- 정적인 데이터. 계산되지 않고 변경되지 않는 데이터
- map에 있는 모든 데이터에 id가 없을 경우
- 데이터가 재정렬되거나 필터링 되지 않는 경우. (계속 그 자리 그대로)
위의 3가지를 만족한다면 index를 key로 사용해도 안전합니다.
하지만 서버에서 받아오는 데이터라면 그럴리 없겠죠?
