이번에는 React를 하면서 알게 된 점들을 적을 것이다.
상태 업데이트 방법
React에는 상태를 업데이트하는 방법이 있다.
const [value, setValue] = useState(0);
setValue(value + 1); // 1번째 방법
setValue((prevValue) => (prevValue + 1)); // 2번째 방법음? 뭐가 다르지라고 생각할 수도 있는데,
기능은 거의 동일하지만 가장 중요한 차이점은
1번째 방법은 이전상태를 고려하지 않는다.
즉, 최신 값을 보장할 수 없다.
아래에는 참고블로그에서 가져온 좋은 예제이다.
const [state, setState] = useState(0);
const sumAll1 = () => {
setState(state + 1);
setState(state + 2);
setState(state + 3);
setState(state + 4);
};
const sumAll2 = () => {
setState((prev) => prev + 1);
setState((prev) => prev + 2);
setState((prev) => prev + 3);
setState((prev) => prev + 4);
};
return (
<>
<div>결과는 : {state}</div>
<button type='button' onClick={sumAll1}>
실행1 !
</button>
<button type='button' onClick={sumAll2}>
실행2 !
</button>
</>
);이런식으로 두 가지 방법을 사용하게 된다면,
1번째 방법은 결과값으로 4가 나오고,
2번째 방법은 결과값으로 10이 나오게 된다.
이 처럼 상황에 따라서 맞게 사용하는것이 좋을 것 같다.
(보통의 경우 이전값을 보장하는 것이 좋기에 2번째를 사용하면 좋을 것 같다)
함수 괄호의 차이
React에서 함수를 사용할 때 () => () or () => {}이 두 형태를 봤을 것이다.
나는 이게 처음 봤을 때, 뭐가 다르지?라고 생각했는데 자세히 생각을 해보니..
() => ()을 사용하게 되면 묵시적으로 return을 해주는 성질을 가지고 있기에 한 줄짜리를 쓸 때, return을 사용하지 않기위해서 사용하게 되고,
() => {}을 사용하게 되면 묵시적으로 return을 안해주기에 return을 사용해주어야 하고, 보통 여러줄의 코드를 쓸 때 사용한다.
함수안 함수
이건 개인차가 있을 것 같은데, 내가 노마드코더(니꼬 쌤)영상을 보면서 알게된 점이다.
니꼬 쌤의 경우에는
function App(){
const onClick = () => {
// 이런식으로!
}
}이런식으로 함수안에 함수를 만들 때에는 위처럼 화살표 함수로 만들어서 사용한다.
내가 보기에는 함수와 함수안에 함수를 구분할 수 있는 좋은 수단이라고 생각하여 앞으로 위처럼 사용할 예정이다.
img태그에는 alt를 붙이자
alt의 의미
img태그에서 src가 안불러와지거나 불러와지기 전에 보여지는 텍스트이다.
img태그에 alt를 붙이는 이유는 그게 웹 표준이기 때문이다.
그리고 혹시 이미지가 안불러와졌을 때를 대비해 alt에 텍스트를 적어두자.
마무리
오늘은 React를 하면서 알게된 다양한 점들에 대해서 알아보는 첫 번째 시간이였다.
다음에도 모르는게 있으면 모아서 블로그를 작성하겠다.
출처
