Index
리액트의 데이터 흐름
emotion & Props
주소를 설계하는 방법
state 리렌더
-리액트가 리렌더하는 방식
컴포넌트 안에서 router 사용시 주의점
map, filter
key, index
Intro
오류 해결 몇 시간을 고민해도 안풀린다? 원리에 대해 다시 생각해보자
router.query.boardId (디테일 페이지) 처럼 주소창을 변경해줘야 하는 애들은
[qqq] 처럼 변수페이지에 라우팅해야 보인다. 왜냐? 그냥 페이지는 주소창이 변경이 안된다.(new)
활성화 버튼을 만들어보자
setState의 원리!
리액트의 데이터 흐름
단방향, 부모 -> 자식으로만 전달
props : 부모 컴포넌트가 자식 컴포넌트에게 물려주는 변수/ 함수
💡props drilling?
-> props 가 자식에게 넘겨주는 단계가 두 단계 이상 될 경우.
과도하지 않으면 괜찮으나 과도할 경우 해당 props가 어디서 내려지고 있는지 찾는 것이 난해 -> 최대한 drilling이 일어나지 않게 해주는 것이 가독성과 유지, 보수의 면에서 유리
-> 이를 방지하기 위해서는 global state를 이용
emotion & props
emotion으로 만들어진 태그에도 props 전달 가능,
특정 태그를 클릭하는 등의 행위가 일어나는 경우, props 활용해 css 변경 가능
클릭하면 색이 왔다 갔다 한다.
현재 위의 코드는 div를 클릭할 때마다 handleOnClick함수가 실행되어 isTrue의 값이 true/false로 바뀌게 된다. isTrue값을 emotion파일로 넘겨 true/false일 때 각각 다른색을 보여주는 것.
props를 넘길 때와 동일(보라색)
emotion으로 넘기는 일은 끝났고 받는 일은?
isTrue 값을 emotion에서 받을 수 있다. 삼항 연산자를 통해 true-> red, false->blue
emotion에 props 던지기 = 템플릿 리터럴
백틱 안에서 자바스크립트를 불러오기 위한 방법 ${}
emotion으로 props 전달하는 활용법 무궁무진함
onClick , onMouseOver, onMouseLeave 등의 태그에 모두 on
true/false 뿐만 아니라 String, Number타입도 모두 전달 가능
state 리렌더
리액트가 리렌더하는 방식
setState 비동기 작동,
동기로 작동하면 변경될 때마다 바로바로 렌더링 -> 비효율적
임시 저장소에 모아두었다가 코드를 끝까지 읽고 한번에 바꿔 렌더링
변경될때마다 임시저장공간에 모았다가 완료 후 한번에 결과 처리
💡리렌더가 되는 상황
- 새로운 props 가 들어올 때
- 부모 컴포넌트가 렌더링될 때
- 강제 업데이트(forceUpdate)가 실행될 때
- state가 변경될 때
💡setState의 비동기적 특성
버튼 클릭시 값? 1 -> 비동기적이기 때문
동기적으로 작동시 코드를 읽고 바로 내려가서 3이 나왔을 것
함수 끝나면 한번만 다시그리자!(useState)특징
const{data} = useQuery() 가 state인 이유? 리렌더
빈값(undefined)으로 그려졌다가 백엔드컴퓨터에서 받아온 후 다시 그려짐
컴포넌트 안에서 router 사용시 주의점
router.query가 반드시 페이지 안에서만 사용되는 것 아님
라우터가 연결된 모든 컴포넌트에서 사용 가능
페이지 컴포넌트 + BoardDetail 컴포넌트에서도 사용 가능
라우터 사용시 주의점
라우터가 있는 컴포넌트 재사용할 때에는 다이나믹 라우팅 폴더[boardId]가 있는지 잘 확인하고 재사용해야함. 폴더가 없는 곳에 router.query 가지고갈 시 오류
💡router.query 사용시 -> 콘솔에 찍어보고 안에 뭐가 있는지 확인 후 필요한 것을 꺼내 사용하라
주소 설계하는 방법
💡폴더 네임
실무에서 변수명이나 폴더 컴포넌트명 등을 마음대로 하기 어렵다. 무엇을 위한 변수인지, 어떤 부분인지 명시할 필요가 있다.
for 문은 실무에서 잘 안쓴다
key는 index를 싫어해
Map? 반복해주는 도구(for문 아님)
const classmates = ['철수','영희','훈이']
classmates.map((el) => (el + '어린이'))
-> '철수어린이' '영희어린이' '훈이어린이'
const classmates = [{name:"철수"},{name:"영희"},{name:"훈이"}]
classmates.map((el)=>el.name+"어린이")
[ {name:철수어린이}, ... ]
소괄호 생략하기
위의 경우, classmates.map((el) => el + "어린이") 생략가능
생략할 수 없는 경우 : 객체를 감싼 (), 두줄이상의 리턴값
children.map((el) => {
({name : "철수어린이"})
}) // ({name : "철수어린이"})를 감싼 소괄호 생략 불가(리턴의 의미)
생략이 불가능한 이유는 무엇일까?
const classmates = ["철수", "영희", "훈이"]
const aaa = classmates.map((el)=> div {el} /div )
aaa = [div 철수 /div, ...]
export default function AAA(){
const aaa = [div 철수 /div ...]
return div {aaa} /div
}
Key로 Index를 쓰면 안되는 이유
Index는 게시글을 삭제할 때, 다음 게시글이 위로 올라오면서
기존 Index와 동일한 값을 같게 됨(유일하지 않음)
프래그먼트란?(<></>)
