2021년 2월 8일
오늘 처음으로 <기억해두면 좋은 짧막한 코딩 상식> 시리즈를 시작했습니다!✨ 제목은 거창하지만 사실 제가 강의를 듣거나 구글에 검색할 때 알게 되는 지식들을 간단하게 정리하기 위해 만들었습니다.
본문으로 적기에는 너무 짧고, 그렇다고 안 적어두기에는 나중에 또 검색할 것 같은 것들을 적어나갈 예정입니다.✍️
리액트 Hook의 useEffect
는 클래스 컴포넌트의 componentDidMount()
와 비슷하게 동작합니다. 컴포넌트가 렌더링 된 후 side-effect로 무엇인가 작업을 해야할 때 해당 함수를 useEffect()
의 콜백으로 넘겨주면 됩니다.
위의 코드는 트위터 클론 코딩 프로젝트 중 홈 화면 컴포넌트인데요, 홈 화면에서 사람들이 적은 '드윗'을 데이터베이스에서 가져오는 작업을 하는 함수를 useEffect()
에 넘겨주어 수행하고 있습니다.
그리고 useEffect()
의 두 번째 인자로 빈 배열을 넘겨준 것을 볼 수 있는데요,
자바스크립트에서 모듈을 만들 때는 한 파일에 여러 유명(named) 함수를 만들기도 하고 하나의 함수만을 선언하기도 합니다.
어떤 모듈이 하나의 개체만을 가질 때 export
뒤에 default
를 붙여주면 그 모듈에 개체가 하나밖에 없다는 것을 명확히 해줄 수 있습니다.
또한 다른 스크립트에서 그 모듈을 가져올 때 중괄호 {} 없이 모듈을 가져올 수 있습니다.
const A = () => {...};
export default A;
그동안은 다른 경로에 만든 모듈을 불러올 때 ./파일
이나 ../파일
같은 상대경로를 사용했었는데요, 프로젝트 최상위 경로에 jsconfig.json
파일을 만들어주고 다음 내용을 추가하면 src 폴더로 시작되는 절대 경로를 사용할 수 있습니다.
리액트 Hook의 setState()
는 콜백 함수에 기존 state 값을 인자로 전달합니다. 이는 토글 기능을 만들 때 유용합니다.
setToggle((prev) => !prev);
기존 state 값을 받아서 반대값으로 업데이트하는 함수입니다. setState()
로부터 인자를 받아 이렇게 간단하게 구현할 수 있습니다.
자바스크립트의 논리 연산자는 불리언 값 외에도 피연산자 중 하나를 반환할 수 있습니다.
연산자 | 표현식 | 결과 |
---|---|---|
&& | A && B | A가 true면 B를, false면 A를 반환(AND) |
|| | A || B | A가 true면 A를, false면 B를 반환(OR) |
여기서 앞의 A를 반환하게 될 때 '단락평가'가 일어납니다. &&
는 A가 false면 굳이 B를 확인하지 않고, ||
는 A가 true면 굳이 B를 확인하지 않습니다. 이는 프로그래밍 지식이 아니라 상식적인 논리입니다.
이 논리 연산자를 잘 활용하면 조건문을 단축시킬 수 있는데요, 예를 들어 로그인 상태일 때 어떤 함수를 실행하는 코드를 조건문으로 작성한다고 할 때,
if (isLoggedIn) {
함수();
}
논리 연산자를 사용하면 간략하게 작성할 수 있습니다.
isLoggedIn && 함수()
이런 구조는 특히 조건이 많아질 때 빛을 발합니다.
if (조건1) {
if (조건2) {
if (조건3) {
함수();
}
}
}
이렇게 안으로 파고드는 조건문도 논리 연산자를 사용하면 직관적으로 나타낼 수 있습니다.
조건1 && 조건2 && 조건3 && 함수()
ES6의 새로운 문법입니다. 문자열이나 배열 앞에 ...
을 붙이면 각 요소들을 풀어서 인자로 전달할 수 있습니다
const A = [1, 2, 3];
const B = (x, y, z) => console.log(x, y, z);
B(...A); // 1 2 3