렌더링
- 컴포넌트가 현재 내부 컴포넌트의 상태에 기초해 UI를 어떻게 구성할지 컴포넌트에게 작업을 요청하는 것이다.
- 기본적인 리액트의 렌더링은 루트(
<div id="root"></div>) DOM 부터 시작해 모든 컴포넌트를 찾아서 렌더링을 진행하는 것을 뜻한다.
리렌더링
- 리액트에선 초기에 한 번 렌더링을 진행하고, 그 이후에 특정 조건이 발생하면 다시 렌더링을 진행하는 것을 리렌더링 이라고 한다.
- 컴포넌트가 리렌더링되는 조건은 아래 4가지가 있다.
- 내부 상태(state) 변경 시
- 부모에게 전달받은 값(props) 변경 시
- 중앙 상태값(Context Value 또는 redux store) 변경 시
- 부모 컴포넌트가 리렌더링 될 때
- 리렌더링 과정
- 위의 조건을 통해 컴포넌트 리렌더링
- 구현부 실행 = props 취득, hook 실행, 내부 변수 및 함수 재 생성
- return 실행, 렌더링 시작
- 렌더 단계(Render Phase): 새로운 가상 DOM 생성 후 이전 가상 DOM과 비교해 달라진 부분을 탐색하고 실제 DOM에 반영할 부분을 결정
- 커밋 단계(Commit Phase): 달라진 부분만 실제 DOM에 반영
- useLayoutEffect: 브라우저가 화면에 Paint하기 전에 useLayoutEffect에 등록해둔 effect(부수 효과 함수)가 동기적으로 실행되며, 이때 state, redux store 등의 변경이 있다면 한번 더 리렌더링
- Paint: 브라우저가 실제 DOM을 화면에 그림. didUpdate 완료.
- useEffect: update되어 화면에 그려진 직후, useEffect에 등록해둔 effect(부수 효과 함수)가 비동기로 실행
리액트의 'hook'
- 리액트에서 함수형 컴포넌트를 사용할 때 편리한 'hook'을 사용할 수 있다.
useState()
- 컴포넌트의 상태를 간편하게 생성하고 업데이트 해주는 도구를 제공한다.
- state : 컴포넌트의 상태
- setState를 통해 컴포넌트의 상태를 변경할 때마다 리렌더링된다.
const [state, setState] = useState(초기값); // state라는 컴포넌트의 상태를 초기값으로 설정해준다.
// setState를 이용해서 state를 변경하면 해당 컴포넌트는 화면에 다시 렌더링된다.useEffect()
- 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 hook 이다.
- 컴포넌트가 마운트(처음 생성) 될 때, 언마운트(사라질 때) 될 때, 업데이트 될 때(특정 props가 바뀔 때) 마다 실행할 수 있다.
useEffect = (() => {
// mount 시점, 변경 시점에 실행할 함수
return () => { // clean up 함수
// unmount 시점, 변경 직전에 실행할 함수
}
}, [종속성 배열])- 종속성 배열에는 한 개 이상의 컴포넌트가 들어갈 수 있다.
- 종속성 배열에 아무것도 없을 때는 모든 컴포넌트의 상태가 변경될 때마다 함수가 실행된다.
- 종속성 배열에 한 개 이상의 컴포넌트가 있으면, 배열안에 존재하는 컴포넌트만 변경될 때마다 함수가 실행된다.
- clean up 함수는 종속성 배열 내의 컴포넌트가 사라질 때, 컴포넌트가 변경되기 직전에 함수가 실행된다.
비동기 처리 async, await, axios
- 자바스크립트는 싱글 스레드 프로그래밍 언어이기 때문에 비동기 처리가 기반이다.
- 비동기 처리는 그 결과가 언제 반환될 지 알 수 없기 때문에 동기식으로 처리하는 기법들이 사용되어야 할 때가 있다.
- 대표적인 동기식 처리 방식에는 setTimeout이 있고, callback, promise가 있다.
aynsc
- asynchronous(비동기)의 약자로, 비동기 함수를 뜻한다.
- async을 지정해주면 Promise를 리턴하는 함수로 만들어줘서 코드가 훨씬 직관적이고, 편리해진다.
// Promise 코드
const p = () => {
return new Promise((resolve, reject) => {
resolve('hello');
// or reject(new Error('error');
});
}
p().then((n) => console.log(n));
// async 코드
async function p2(){ // async을 지정해주면 Promise를 리턴하는 함수로 만들어줍니다.
return 'hello';
}
p2().then((n) => console.log(n));axios
- axios는 비동기 통신 JavaScript 라이브러리 중 하나이다.
- 요청과 응답을 모두 JSON 형식으로 자동 변환해준다.
const res = axios.get("url")
.then((res) => {
// 응답 성공 시 실행하는 함수
})
.catch((error) => {
// 응답 실패 시 실행하는 함수
})
.then(() => {
// 결과에 상관없이 실행하는 함수
});await
- 기다린다라는 뜻으로, Promise 객체의 성공 또는 실패로 실행이 완료되기를 기다리는 코드이다.
- 뒤의 promise 코드의 응답을 기다리고 실행되기 때문에 안전성이 높다.
- await 키워드는 async 함수 안에서만 사용할 수 있다
- await를 이용하게 된다면 콜백함수 처리 없이 비동기 처리를 해줄 수 있다.
const res = await axios.get("url")
.then((res) => {
// 응답 성공 시 실행하는 함수
})
.catch((error) => {
// 응답 실패 시 실행하는 함수
})
.then(() => {
// 결과에 상관없이 실행하는 함수
});전송 방식
- 전송 방식에는 4가지가 있다.
1. GET
- 서버로부터 데이터를 받는다.
- URL에 변수(데이터)를 포함시켜 요청
- 데이터를 Header에 포함하여 전송
- URL에 데이터가 노출되기 때문에 보안에 취약하다.
- 캐싱 기능을 사용할 수 있다.
- 캐싱 : 한 번 접근 후 재요청 시 빠르게 접근하기 위해 레지스터에 데이터를 저장시켜 놓는 것
2. POST
- 서버로 데이터를 전송하여 자원을 생성한다.
- JSON 형식이나 객체 형식으로 데이터를 전송 가능하다.
- URL에 변수(데이터)를 노출시키지 않아 보안성이 좋다.
- 데이터를 Body에 포함시킨다.
- 캐싱은 불가능하다.
- 문자열 뿐만 아니라, 버튼, 텍스트 박스와 같은 객체들의 값도 전송이 가능하다.
3. PUT
- 서버에 존재하는 DB 자원을 수정할 때 사용한다.
4. DELETE
- 서버에 존재하는 DB 자원을 삭제할 때 사용한다.
useParams()
- 리액트에서 url로 이동할 때 변수를 가지고 가고 싶을 때 사용하는 컴포넌트이다.
const { pId } = useParams(); // 이 페이지로 들어올 때 url/{pId} 처럼 뒤에 변수를 붙여서 이동하면 변수를 자동으로 매핑해주는 편한 기능이다.참고 자료
https://velog.io/@hjthgus777/%EB%8B%A4%EC%8B%9C-%ED%95%9C%EB%B2%88-useState-%EB%A5%BC-%ED%8C%8C%ED%97%A4%EC%B3%90%EB%B3%B4%EC%9E%90
https://velog.io/@khyup0629/javascript-async%EC%99%80-await%EC%9D%98-%EA%B0%9C%EB%85%90%EA%B3%BC-%EC%82%AC%EC%9A%A9%EB%B2%95
https://velog.io/@ch9eri/axios-async-await
https://narup.tistory.com/272
댓글