id를 안주고 뿌려진 상태
클래스이름만 있는 상태. 클래스 이름을 자동으로 만들어서 부여해준다
리액트는 그림그릴때 상태 배열만 관리한다
4개가 있는데 만약에 3번을 삭제한다면??? 3번자리 애를 날리고 밑에 있는 4번을 위로 올리는게 가장 좋음!
근데...밑에 1000개가 있는데 1000개를 하나씩 위로 올려서 재배치하는 거라면????일이 많아짐....
그래서! 형태는 그대로 두고! 데이터만 바꿔 끼우는 방식으로 하는게 효율적이다!!!(react 동작 원리)
위에 element들은 각각 고유한 키를 가지고 있다.
아래는 키값이 없다는 의미로 warning이 뜬 상태
컬렉션 데이터들은 고유한 키 값을 부여해준다!
App이 상태관리를 들고있고 postItem은 안들고있다!!
통신끄고
잠시 test해보자
100만원 들어있는 가방에 만원을 추가하려한다. 상대방이 가방 하나 들고있다면,,, 거기에 100만원 넣고 만원 추가한다
이렇게 새로운 공간을 만들어놓는다.
얕은 복사는 주소를 그대로 복사해버리는거
깊은 복사는 데이터 자체를 복제해서 새로운거 만들어내는거!!!!! 위에 코딩을 하면?? 깊은 복사가된다
react에서는 깊은 복사로 한다.
왜 깊은 복사가 중요한가????
1부터 10억개의 데이터가 있다고하자. react는 데이터가 바뀌면 바뀐 데이터를 이전 상태와 비교해서 파악한다.
5번째 데이터를 바꿨다고하자. 이때 10억개를 하나하나 다 비교해서 바뀌었는지 확인하면? 연산이 너무 많다 react는 연산과 그림그리는 일 두가지를 한다.
react는 기본적으로 얕은 비교를 한다. 데이터 비교가 아니라 주소비교!!
깊은 복사를 해서 넘겨주면??? 데이터 비교를 하지 않고 어? 주소가 바뀌었네 하고 바로 그림을 다시 그려준다
깊은 복사를 해야 reference 주소가 달라지니까 비교가 바로된다.
근데,,, 단순히 push를 통해서 추가기능을 해주면???? 얕은 복사라서 바뀐게 있는지 일일이 react가 확인해야해서 오래걸리고 비효율적이다.
깊은 복사 왜하지???? reference비교하기위해서!!!!!!!!!!
내부까지 안봐도 겉만보고 바뀌었네??? 할수있게!!!!!
2. 삭제
필터링해서 1,2,4만 가지고 return해주게 한다.
3. 수정
쉬운 예제로 먼저 확인
test 끝!!!! ========================================
많은 데이터들은 다운받아서 상태로 관리하면 된다!!!
결과는???
의존성 추가해보자
*no sql => jpa
post select하면???
fk키로 하지 않는다. post테이블에 user에 대한 정보들이 user.id, user.username 을 각각 컬럼 만들어서 저장된다.
데이터 중복되어서 들어간다(데이터가 무거워짐). select할때 속도가 빠름
단점!!! user가 username을 바꾸면?? post에 저장된 user.username에도 지장이 생긴다!!!!
수정할때 복잡해진다(트랜잭션 처리해줌). 그래서 수정이 크게 없는 서버에 no sql사용한다. 예를들어서! 카카오톡 같은 채팅 서버!!(rdb에 저장할 필요없으니까)
insert할때도 조금 귀찮다.
근데 인스타는 select이 많이 일어나니까 insert가 조금 귀찮더라도 문서로 알고리즘 잘 짜놓고 no sql를 사용한다.
*rdb( relation database)는 user select하면 uesr만 돌려준다
post select하면??
fk를 통해서 관계한다. user테이블 , post테이블이 있다면 post테이블에서 user id를 user테이블의 아이디로!
이렇게 하면 데이터 중복이 안된다.
단점은?? select할때 단점이 있다. post id=1을 select하면? userId=2이라하면,,, user 정보도 같이 넘겨준다
그러면 select할때 느려진다!!
fetch해보기!!!!
*참고공부
화면이동
react router
react는 그림 그려주는애다!!!!
그러면 react는 계속 돌고있어야한다 demon
node.js가 돌고있는 express라는 서버에서 리엑트엔진이 돌고있다 3000번 서버
리엑트엔진은 스프링서버에서 json데이터(html이 아닌!)로 사용자 요청받아서 그림을 그려준다
<공부해야할 것>
stylecomponent 그림그리는 연습!!! css
자바스크립트의 ex6문법!!!
비동기통신
userEffect
상태
자바스크립트 불변함수 4개 => 전개 연산자..., filter(수정,검색)