트위터 클론 코딩 과정에서 깨달은 것들

Hyuno Choi·2021년 2월 8일
0
post-thumbnail

2021년 2월 8일


오늘 처음으로 <기억해두면 좋은 짧막한 코딩 상식> 시리즈를 시작했습니다!✨ 제목은 거창하지만 사실 제가 강의를 듣거나 구글에 검색할 때 알게 되는 지식들을 간단하게 정리하기 위해 만들었습니다.

본문으로 적기에는 너무 짧고, 그렇다고 안 적어두기에는 나중에 또 검색할 것 같은 것들을 적어나갈 예정입니다.✍️

useEffect()

리액트 Hook의 useEffect는 클래스 컴포넌트의 componentDidMount()와 비슷하게 동작합니다. 컴포넌트가 렌더링 된 후 side-effect로 무엇인가 작업을 해야할 때 해당 함수를 useEffect()의 콜백으로 넘겨주면 됩니다.

위의 코드는 트위터 클론 코딩 프로젝트 중 홈 화면 컴포넌트인데요, 홈 화면에서 사람들이 적은 '드윗'을 데이터베이스에서 가져오는 작업을 하는 함수를 useEffect()에 넘겨주어 수행하고 있습니다.

그리고 useEffect()의 두 번째 인자로 빈 배열을 넘겨준 것을 볼 수 있는데요,

  • 배열 안에 state를 넣어주면 해당 state가 바뀔 때마다,
  • 빈 배열을 넘겨주면 첫 렌더링 때에만 호출됩니다.

export

자바스크립트에서 모듈을 만들 때는 한 파일에 여러 유명(named) 함수를 만들기도 하고 하나의 함수만을 선언하기도 합니다.
어떤 모듈이 하나의 개체만을 가질 때 export 뒤에 default를 붙여주면 그 모듈에 개체가 하나밖에 없다는 것을 명확히 해줄 수 있습니다.

또한 다른 스크립트에서 그 모듈을 가져올 때 중괄호 {} 없이 모듈을 가져올 수 있습니다.

const A = () => {...};

export default A;

절대경로 설정하기

그동안은 다른 경로에 만든 모듈을 불러올 때 ./파일이나 ../파일 같은 상대경로를 사용했었는데요, 프로젝트 최상위 경로에 jsconfig.json파일을 만들어주고 다음 내용을 추가하면 src 폴더로 시작되는 절대 경로를 사용할 수 있습니다.

리액트 Hook setState()

리액트 Hook의 setState()는 콜백 함수에 기존 state 값을 인자로 전달합니다. 이는 토글 기능을 만들 때 유용합니다.

setToggle((prev) => !prev);

기존 state 값을 받아서 반대값으로 업데이트하는 함수입니다. setState()로부터 인자를 받아 이렇게 간단하게 구현할 수 있습니다.

자바스크립트 논리 연산자

자바스크립트의 논리 연산자는 불리언 값 외에도 피연산자 중 하나를 반환할 수 있습니다.

연산자표현식결과
&&A && BA가 true면 B를, false면 A를 반환(AND)
||A || BA가 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
profile
프론트엔드 웹 개발자를 목표로 하고 있습니다.

0개의 댓글