React / Node.js
노드
🔽
서버
🔽
DB 연동 ( CRUD : Create Read Update Delete )
🔽
리액트 요청에 따라 노드 응답 ( 리액트 쪽 요청에 맞는 DB 전송 )
🔽
🔸
🔸 필수 모듈 : express, cors
🔸 서버로서 필수적으로 쓰는 메서드 : use( ), CRUD 메서드, next( ) => express 내장 함수
🔸
🔸 메인의 필수 메서드 : listen( )
🔸 라우터들의 필수 메서드 : use( ), CRUD 메서드 ( 주로 get, post ), next( ), (이벤트)export
🔸
🔽
리액트
🔽
🔸
🔸 필수 모듈 : react, react-router-dom, axios
🔸 프론트로서 필수적으로 쓰는 메서드 :
ㅤㅤ BrowserRouters > Routes > Route:path:element,
ㅤㅤ get : 노드(서버 라우터)로 요청 보내면 그 해당 라우터의 get으로 데이터 전달해야 연동 성공,
ㅤㅤ 응답으로 온 db 조회 / 데이터 받아옴 (시간차 존재)
ㅤㅤ 텍스트만 받음 / 스피드가 빠름 / 노출이 잘 됨(주소창을 통해 의사소통 가능)
ㅤㅤ axios.get(요청라우터).then((res)=>{ }).catch((err)=>{ })
ㅤㅤ post : 리액트쪽에서 폼태그 데이터를 서버에 저장
ㅤㅤ 결과값으로 true/false를 보내줌
ㅤㅤ 이미지, 영상, 첨부파일 등의 복잡한 데이터를 보낼 때 이용 / 주소창 노출X
🔸
🔸 외부 렌더링
ㅤㅤ Link to='클릭 당하면 주소 노출'
ㅤㅤ => 렌더링 후에는 a태그가 됨
ㅤㅤ => 약속받은 js가 내장된 a태그 ( 진짜 a태그 사용 시 새로고침하는 순수 a태그이므로 주의 )
ㅤㅤ => URI(Uniform Resource 'Identifier' - 식별자) 변경 (인터넷 주소 노출 변경)
ㅤㅤ => 인터넷 주소에 노출된 주소의 해당 라우터 화면 등장
ㅤㅤ ( Router path ="넷 주소창에 노출된 주소" element={ 컴포넌트 or 노출하고픈 객체 } )
🔸
🔸 내부 렌더링
ㅤㅤ => 컴포넌트 내부 렌더링 ( useState 이용 )
ㅤㅤ => └ const [ a, b ] = useState( a초기값 )
ㅤㅤ => ㅤ└ a를 바꿀 수 있는 메서드 b ( b를 통해 업데이트 해야만 렌더링됨 )
🔸
🔽
프론트엔드
🔽
인터페이스로 서비스 => 빠른 대응, 컴포넌트 단위로 새로고침( 렌더링 )
useState 유의사항
Array
const [ arr, updateArr ] = useState([]);
const arataArr = [ ...arr, 새로운 값 ];
updateArr(arataArr);Array에 push를 할 경우에는
할당받은 참조 위치(위치값)이 그대로이므로 렌더링이 일어나지 않음
그러나 위처럼 새 Array를 생성하여 업데이트할 경우에는 참조 위치가 다르므로 렌더링 발생함
Object
Object도 그릇에 옮겨 담듯이 해주면 된다
