내가 만들고 싶은 스와이퍼는 아래와 같은 형태를 가진 기본적인 thumbs 스와이퍼였고

자꾸 적용을 하면 이러한 런타임 에러가 뜨는 것이였다 😩

버전 문제일까 하여 찾아봤지만 글을 보면 버전 문제는 아닌 것 같았고 (참고로 저는 10.0.4 버전이였습니다) onSwiper유형 null 및 Swiper가 호환되지 않기 때문에 오류가 표시되는 것 같았다. 그래서 기본적인 thumbsSwiper에 thumbs 부분을 아래와 같이 바꿔주면 상단의 에러는 사라지는데 아마 이 부분만 바꾸면 State쪽에서 타입 관련한 에러가 또 뜰 것이다.

 <Swiper
    thumbs={{ swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null }}
    modules={[Thumbs]}>
 >

그래서 thumbs 스와이퍼를 선언해주는 부분에서 any 타입을 추가해주면 더 이상 에러가 뜨지않고 잘 동작하게 된다. (하지만 타입을 any로 설정하는게 맞나 싶어서 이 문제에 대해서는 더 찾아봐야 할 것 같다 😮‍💨 )

const [thumbsSwiper, setThumbsSwiper] = useState<any>(null)

참고 링크

Github

간단히 말해서 자바스크립트에 타입을 부여한 언어다. 자바스크립트의 확장된 언어라고도 볼 수 있는데, 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한 번 변환해주어야 한다. 이 변환 과정을 우리는 컴파일이라고 부른다.

왜 써야하는가?

가장 큰 이유는 이 두가지가 아닌가 싶다.

1. 에러의 사전 방지
2. 코드 가이드 및 자동 완성 (개발 생산성 향상)

그래서 장점과 단점이 뭔데?

장점

1. 높은 수준의 코드 탐색과 디버깅

코드에 목적을 명시하고 목적에 맞지 않는 타입의 변수나 함수들의 에러를 사전에 제거한다. 또, 실행 전 피드백을 제공해서 작업과 동시에 디버깅이 가능해 생산성을 높일 수 있다.

2. 자바스크립트 호환

자바스크립트와 100% 호환이 가능해서 서버단에서 개발이 이루어지는 복잡한 대형 프로젝트에서도 사용이 가능하다.

3. 강력한 생태계

라이브러리 지원이 잘되어있고 각종 에디터가 관련 기능 플러그인을 지원한다.

4. 점진적 전환 가능

자바스크립트를 타입스크립트로 전환하는데 부담이 있다면 추가 기능이나 특정 기능에만 도입함으로써 점진적으로 전환할 수 있다.

단점

1. 새로운 언어에 대한 러닝 커브
2. 상대적으로 낮은 가독성
3. 코드량 증가

- 결론 - 프로젝트의 규모가 크고 복잡하거나 유지보수가 중요한 장기 프로젝트일수록 타입스크립트를 쓰는 것이 좋다.

기본 타입 종류

String 타입

let str: string = 'hi';

Number 타입

let num: number = 10;

Boolean 타입

let isLoggedIn: boolean = false;

null / undefined 타입

let nullValue: null = null;
let undefinedValue: undefined = undefined;

Array 타입

let arr: number[] = [1,2,3]

또는 이런 식으로 제네릭을 사용할 수 있다.

let arr: Array<number> = [1,2,3]

Object 타입

let user: { name: string, age: number } = { name: '김객체', age: 30 }

Tuple 타입 원소의 수와 각 원소의 타입이 정확히 지정된 배열의 타입을 정의할 수 있는 타입 만약, 정의하지 않은 타입이나 인덱스로 접근 할 경우 오류가 난다.

let arr: [string,number] = ['hi', 10];

Enum 타입 특정 값(상수)들의 집합을 의미를 가진 타입

enum Avengers { Capt, IronMan, Thor }
let hero: Avengers = Avengers.Capt;

enum Avengers { Capt, IronMan, Thor }
let Hero: Avengers = Avengers[0];

Any 타입 모든 타입에 대해서 허용한다는 의미를 가진 타입

let str: any = 'hi';
let num: any = 1203;
let arr: any = ['a', 2, true]

Void 타입 변수에는 undefined와 null만 할당하고, 아무런 값도 반환하지 않는 함수의 반환 타입

let unuseful: void = undefined;
function notuse(): void {
    console.log('sth');
}

Never 타입 아무런 값도 가질 수 없는 타입텍스트

function neverEnd(): never {
    while (true) {

    }
}

References

https://joshua1988.github.io/ts/ https://yamoo9.gitbook.io/typescript/ https://ahnheejong.gitbook.io/ts-for-jsdev/ https://www.samsungsds.com/kr/insights/typescript.html

안녕하세요 이번에 테오의 스프린트 14기 회고를 해보려고 합니다 🤗 기간은 2.22 ~ 2.27일까지 5일간 진행했었는데요!

항상 테오의 프론트엔드 방에서 좋은 정보들을 많이 얻어 갔었는데 어느 날 공지를 보니까 테오의 스프린트 모집을 하고 있더라구요.

공지 글을 읽어보니 5일간 좋은 사람들과 함께 잘 만들어진 협업 프로세스를 함께 경험한다 라고 적혀있었습니다. 물론, 아직은 제가 너무 개발 실력이 부족한 상태라 지원을 할까 말까 계속 고민을 했었는데... 뭔가 이 기회를 놓치긴 아까웠습니다... 그래서 못하더라도 하면서 조금이라도 배우고 싶다는 생각이 들어 바로 지원을 했습니다 😹

정말 많은 분들이 지원을 해서 원래 예정되어 있던 8시 반이 아닌 8시 / 10시로 반을 나눠서 진행을 했고 저는 10시 반에 참여를 하게 됐습니다!

* 시작 전 안내 *

1. 님 , 극존대 금지! 2. 게더타운에서 캠은 켜지 않는다. 3. 스프린트는 협업과 프로세스를 배우는 시간이지 포트폴리오나 사이드 프로젝트를 하는 시간이 아니다.

*1일차 아이디어 & 팀 선정 *

1일차는 아이디어 선정과 팀 선정을 하는 날이었습니다.

다 같이 피그잼에 모여서 자신이 생각해 온 아이디어를 적어보고 다 적고 나면, 한 명씩 돌아가면서 본인 아이디어에 대해 설명하고 다른 분들은 들으면서 엄청난 리액션을 하며 의견을 자유롭게 적었습니다. (리액션을 많이 해주시니까 말하는데 부담스럽지 않더라구요.ㅋㅋㅋㅋㅋ 짱짱)

why? what? how? if? 어필 포인트!

저는 드림캐쳐라는 아이디어를 발표했는데요. 평소에도 저는 자고 일어나면 인상 깊었던 꿈은 까먹지 않으려고 메모장에 날짜랑 내용을 적어두고는 했었습니다. 그래서 나의 꿈을 기록하고 + 꿈 이야기를 좋아하는 사람들과 커뮤니티에서 떠들기도 하고 + 추가적으로 해몽 해석까지 해줄 수 있는 서비스를 만들고 싶었습니다. 이 아이디어를 발표하고 나니 놀랍게도 많은 분들이 좋아해 주셔서 매우 뿌듯했어요 😄✌️

그렇게 최종으로 5개의 아이디어가 뽑혔고 프로젝트 당 6-8명 정도의 인원이 분배돼서 각자 팀 피그잼으로 이동해 서로에 대해 알아가는 시간을 가졌습니다.

저희 팀은 총 10명으로 FE 6명, BE 2명, 디자이너 2명으로 구성이 되어있었고 팀 mc를 맡아주실 분을 따로 뽑아 mc가 전체적인 진행을 해주셨습니다. 🎤

팀 캔버스를 통해 타이머를 맞춰서 각자 어떤 기술 스택이 있는지, 작업 안되는 날짜, 함께 이루고 싶은 목표 등을 적어보고 한 명씩 돌아가면서 편하게 이야기를 나누는 시간을 가졌는데 확실히 첫째 날에 저기에 정리를 해두니 다시 물어볼 일이 없어서 좋았던 것 같아요 👍

*2 & 3일차 지도 그리기 & 스케치 시간 *

2일차는 서비스에 대한 목적, 추구해야 할 가치에 대해서 생각나는 키워드를 마구마구 자유롭게 적고 큰 틀을 만들어가는 작업을 진행했습니다.

또, 주제와 비슷한 레퍼런스를 찾아와서 대강 어떤 식으로 페이지를 나눌 건지에 대해 의논해 보며 큼지막하게 스토리보드 분류 작업을 하였습니다.

3일차는 찾아온 레퍼런스 디자인을 바탕으로 각자 페이지 별 스토리보드를 정리하고 이 중에서 마음에 드는 화면을(?) 하나씩 투표해 봤습니다 ! 스토리보드까지 정리를 하고 나니 확실히 어느 정도 틀이 잡혀진게 느껴졌어요.

스토리보드를 정하고 나서 PL을 뽑아 기술 스택 - 페어 프로그래밍 - 개발 우선순위를 정해보는 시간을 가졌어요. 그래서 우리가 추린 페이지들이 임팩트가 있나? 빨리 만들 수 있나?를 정리해보고 그 페이지를 기반으로 BDD와 SDD 를 통한 설계를 진행했어요.

BDD: 사용자의 행동을 중심으로 개발을 진행하는 방식 SDD: 데이터를 중심으로 추려내고 개발을 진행하는 방식

개발을 들어가기 전에 사용자가 이 페이지에서는 어떤 액션을 취할 것인가? 이런 부분들을 미리 체크하고 그에 맞는 구조를 설계하고 이름을 지어두는 방식이었어요 🔧

이 부분에 대해서 테오한테 설명을 듣고 정리를 해보니 확실히 정리가 되는 느낌이더라구요. 진행을 해보면서 가장 기억에 남았던 부분 중 하나입니다.

*4 & 5일차 개발 단계 *

본격적으로 개발을 들어가는 날이 되었습니다! 기본적으로 브랜치, PR, Commit, Styled-Component 컨벤션을 정해두고 작업을 진행했습니다.

아무래도 6명이서 같이 작업을 하다 보니 충돌이 많이 생겼었고 가뜩이나 저는 이렇게 개발 협업을 했던 경험이 없었어서 잘 몰랐던 상태였는데 같이 한 팀원분이 너무 잘 설명해 주셔서 큰 문제 없이 작업했습니다 😅

개인적으로, 저는 많은 페이지 작업을 한 것도 아니였고 퍼블리싱 쪽으로 많이 도움을 드렸지만 Typescript 사용도 처음 해봤고 잘하는 팀원들과 새벽 5-6시까지 여러 가지 방법에 대해 논의를 했었는데 이런 게 저로서는 되게 다양한 경험이 됐던 것 같고 앞으로 혼자서 해봐야할 게 많구나라는 깨우침도 얻게 되었던 것 같습니다 🤔

** 6일차 데모 공유 및 발표 **

드디어 마지막 날이 다가왔습니다! 정말 시간이 빨리 가네요 💦 모든 팀이 데모를 공유하고 난 뒤, 디스코드에 깃허브 링크와 배포 링크를 올리고 다른 팀원끼리 돌아가면서 대화를 해보는 시간을 가졌는데요. 다른 팀원과 화면 공유를 하면서 이런 건 어떻게 구현했는지 궁금한 점들에 대해서 이야기를 나눠보니 시간 가는 줄 모르고 떠들었던 것 같아요ㅋㅋㅋㅋㅋㅋ 😆

마지막으로 팀원들과 한 번 더 회고를 해보면서 아쉬웠던 점, 배웠던 점 등을 작성해 보고 추후에 계속 진행을 해볼 건지에 대해서도 이야기를 나눴습니다 ! 작업을 하면서도 금방 새벽이 되고 시간이 너무 빨리 가서 팀원들도 아쉬운 마음이 컸었는데 이렇게 이별을 하려고 하니까 다들 눈물을 흘리더ㄹ... (장난입니다)

이렇게 이번 14기 테오 스프린트가 끝이 났는데요 🥳 짧지만 정말 많이 배우고 의미 있었던 시간이 됐던 것 같습니다 ! 너무너무 재밌었고 다음 15기도 존버합니다 테오 짱 ✨ (다음에는 제가 개발 능력을 더 키워오겠습니다 . . . ㅎㅎ)

parsing error: cannot find module 'next/babel'

next.js를 실행 중 이런 에러를 맞이했다. 이런 경우에는 두가지 처리를 해주면 되는데,

.eslintrc.json 파일로 가서 이렇게 수정을 해주고

{
  "extends": ["next/babel", "next/core-web-vitals"]
}

root에 .babelrc 파일을 생성한 후 이 코드를 넣어주면 된다! 😈

{
  "presets": ["next/babel"],
}

알고리즘 4일차

1. 중앙값 구하기

여기서 해야하는 것

1. 순서대로 정렬시키기
2. 중앙값 찾기

function solution(array) {
  // a - b는 오름차순 정렬이다.
  array.sort((a,b) => a - b);
  let num = parseInt(array.length / 2);

  return array[num];
}

이렇게 하면 array 배열에 sort 함수를 사용하여 정렬을 시켜주고 num 변수에 array 배열의 길이값 나누기 2를 해서 담아주게 되면 5개 중 3번째 , 3개 중 2번째가 출력되게 되는것이다.

2. 짝수는 싫어요

요것은 간단한 문제!

function solution(n) {
    let answer = [];
      for(let i = 1; i <= n; i+=2) answer.push(i);

      return answer;
}

for문을 사용해 1 ~ 10까지 숫자를 순회하며 우리가 처음 숫자를 1로 지정해주었기 때문에 1+2 = 3 , 2 + 2 = 4 이런식으로 2를 더해서 홀수가 나오는 값을 배열안에 넣어주면 되는 것이다!

알고리즘 문제풀이 3일차

오늘은 프로그래머스에서 Lv.0 문제 두개를 풀어보았다. 정답율이 높고 쉬운 문제 위주로 풀어보았는데도 긴가민가 했었다...! (멍ㅊㅓㅇ..)

1. 문자열 안에 문자열

문제는 str1 문자열 안에 str2의 문자열이 포함되어 있을 시 1을 반환하고 아니면 2를 반환하는 문제였다.

function solution(str1, str2) {
    return str1.includes(str2) ? 1 : 2;
}

그래서 삼항연산자를 사용하여 str1에 str2가 includes 되면 1을 반환하고 false일 시 2를 반환하게끔 하였다.

이걸 짜놓고 얼레벌레 계속 오답만 나오길래 뭐지... 이러고 있었는데 C언어에 하고 있었다..^^ (아픈날은 그냥 쉬는걸로..😅)

2. 자릿수 더하기

n에 들어가게 될 1234 , 930211 숫자들을 전부 더한 값을 출력하면 되는 문제다.

function solution(n) {
    var answer = 0;
      n = n.toString();

      for(let i=0; i < n.length; i++) {
        answer += parseInt(n[i]);
    }

      return answer;
}

toString : 숫자를 문자열로 변환시켜주는 함수 parseInt : 문자열 인수를 파싱하여 특정 진수의 정수값을 반환하는 함수

먼저 n을 문자열로 변환 시켜줘야 하기 때문에 toString 함수를 사용해 n을 문자열로 변환시켜주었고 for문을 사용하여 n의 문자열 길이를 체크해 answer 변수에 n의 정수값(1,2,3,4) 를 하나씩 더해줘서 대입하면 10이라는 숫자를 return 하게된다.

알고리즘 문제풀기 2일차

오늘의 문제는 2개를 풀어보았다.

첫 번째는, 삼각형 판별하기 두 번째는, 1부터 N까지의 합 구하기

1. 삼각형 판별하기

길이가 서로 다른 a,b,c 막대로 삼각형을 만들 수 있으면 Yes , 아니면 No를 출력하는것이다. 삼각형을 만드려면 제일 긴 막대의 길이보다 나머지 두 막대의 합이 짧으면 안되기 때문에 이럴 경우 No를 출력해주면 되는것이다.

function solution(a,b,c) {
  let max;
  let sum = a + b + c;

  if(a > b) {
      max = a;
  } else {
      max = b;
  } if(c > max) {
      max = c;
  }
  sum - max > max ? console.log("Yes!") : console.log("No!");
}

console.log(circle(6,7,11));

max , sum이라는 변수가 있다. max는 최대 길이의 값을 담을것이고 sum은 총 세 변의 길이의 합을 담아둔다. 그래서 각 a,b,c의 길이를 비교해 가장 큰 길이를 max에 저장하고 전체 길이에서 제일 긴 변의 값을 뺀 나머지의 두 값이 긴 변의 값보다 크면 삼각형을 만들 수 있고 아니면 안된다는 메세지를 출력하면 되는 것이다!

2. 1부터 N까지의 합 구하기

두 번째는 간단간단한 문제여서 for문을 사용하여 풀었다.

function solution(n) {
    let answer = 0;

      for(let i = 1; i <= n; i++) {
      answer = answer + i;
    }

      return answer;
}

console.log(solution(10));

for문에서 answer 라는 변수값을 0으로 만들어놓고 for문을 사용하여 처음 더해지는 값은 answer가 담고 있는 0부터 + 1을해서 1부터 10인 값까지 1씩 더하면서 55라는 숫자가 출력되게끔 해주었다.

아직까지 어려운 난이도의 문제는 아니라 금방 풀 수는 있었지만 정말 기초문제부터 차근차근 많이 풀어봐야겠다는 생각을 많이 했다 재미져 ✏️

일단 마크업은 글씨를 감싸고 있는 부모 h1 요소만 만들어놓고 나머지 글자는 js에서 처리하였다.

  // 메인 타이틀 클래스 가져오기
  main_animation_text(".main_title");

  function main_animation_text(element) {
    var newText = "";
    var theText = document.querySelector(element);

    for (i = 0; i < theText.innerText.length; i++) {
      newText += "<span>";
      newText += theText.innerText[i];
      newText += "</span>";
    }
    theText.innerHTML = newText;
    var targetsDiv = document.querySelectorAll(element + " span");
    TweenMax.staggerFromTo(
      targetsDiv,
      2,
      {
        opacity: 0,
        y: 300,
        ease: Elastic.easeOut.config(1.2, 0.9),
      },
      {
        opacity: 1,
        y: 0,
        ease: Elastic.easeOut.config(1.2, 0.9),
      },
      0.15
    );
  }

메인 애니메이션 텍스트 함수를 만든 후 글자 하나의 element를 가져오기 위해 넣어주고 for문을 사용해 innerText로 element안의 text 값을 가져와 span 태그로 구성된 글자들을 순서대로 출력하게끔 해 빈 문자열인 newText 안에 element 텍스트 값이 들어가 출력되는것이다.

TweenMax 애니메이션 속성

TweenMax.staggerFromTo(
      targetsDiv,
      2,
        // 중괄호 안 파라미터는 애니메이션 할 속성
        // * 주의: 속성이름은 카멜케이스로 작성해야할 것
      {
        opacity: 0,
        y: 300,
        // gsap에는 애니메이션을 추가할 수 있는 
        // 다른 ease 속성들을 패키지로 제공하고 있음
        ease: Elastic.easeOut.config(1.2, 0.9),
      },
      {
        opacity: 1,
        y: 0,
        ease: Elastic.easeOut.config(1.2, 0.9),
      },
      0.15
    );

targetsDiv : 애니메이션 대상 targetsDiv 하단 2 : 애니메이션 시간 y: 글자 포지션 값 ease: gsap에서는 애니메이션을 추가할 수 있는 다른 ease 속성들을 패키지로 제공하고 있음 0.15 : 애니메이션 딜레이

결과

이것외에도 TweenMax의 다양한 애니메이션 속성들이 많은데 다음엔 다른 텍스트 애니메이션이나 슬라이드 애니메이션을 참고해 만들어봐야겠당 🤗

GreenSock - GSAP 사이트

알고리즘 문제풀기 1일차

문제는 *세 수 중 최솟값을 구해라 ! * 그래서 두 가지 방법을 사용해 문제를 풀어보았다.

// 1.if문을 이용한 방법
function solution(a,b,c) {
    let answer;

       if(a < b) {
        answer = a;
    } else {
        answer = b;
    } if(c < answer) {
        answer = c;
    }
    return answer;
}

console.log(solution(5,15,20))

첫 번째는, solution이라는 함수를 만든 후 출력할 a,b,c를 매개변수로 넣어주었다. 그리고 answer라는 변수를 만들어준 후, 처음 a와 b의 값을 비교해서 a가 b보다 작을 시 a를 출력하고 b가 작을 시 b를 출력하게끔 처리한다. 그리고 a와 b중 더 작은 값으로 출력된 값을 c랑 비교해 c가 더 작을 시 answer라는 변수에 c의 결과값을 출력해 주는 것이다.

// 2.math 함수를 이용한 방법
function solution(a,b,c) {
    let answer = Math.min(a,b,c);
      return answer;
}
console.log(solution(5,15,20));

solution의 인수 a,b,c 값을 내장객체인 Math.min() 함수안에 매개변수로 넘겨받게 되고 그중 가장 최솟값을 반환하는 걸 볼 수 있다.

이렇게 하면 둘 다 5라는 최솟값이 나오게 된다!

인프런 '자바스크립트 알고리즘 문제풀이 입문' 강의를 듣고 풀면서 정리한 내용입니다!

스코프

스코프란 자바스크립트 엔진이 참조의 대상이 되는 식별자를 검색할 때 사용하는 규칙의 집합이다. 즉 , 어떤 변수를 사용하거나 함수를 호출하려고 할 때 해당하는 식별자로 사용하는데, 그 식별자를 검색하는 메커니즘이라고 이해하면 된다.

1. 렉시컬 스코프

프로그래머가 코드를 짤 때 , 변수 및 함수/블록 스코프를 어디에 작성하였는가에 따라 정해지는 스코프를 렉시컬 스코프라고 한다. "렉시컬(Lexical)" 이라는 명칭이 붙은 이유는 자바스크립트 컴파일러가 소스코드를 토큰으로 쪼개서 의미를 부여하는 렉싱 단계에 해당 스코프가 확정되기 때문이다. 쉽게 말하면 , 변수 혹은 함수/블록이 어디에 써있는가를 보고 그 스코프를 판단하면 된다.

2. 스코프 체인

현재 스코프에서 식별자를 검색할 때 상위 스코프를 연쇄적으로 찾아나가는 방식을 말한다. 실행 컨텍스트를 보면 생성될때마다 LexicalEnvironment 가 만들어지고 그 안에 outer 참조 값이 있다는 것을 알텐데 바로 이 outer 값이 상위 스코프의 LexicalEnvironment를 가리키기 때문에 이를 통해 체인처럼 연결되는 것이다.

호이스팅

호이스팅이란 "끌어올리다" 라는 뜻으로 변수 및 함수 선언문이 스코프 내의 최상단으로 끌어오려지는 현상을 말한다.

여기서 주의할 점은 " 선언문 " 이라는 것이며 " 대입문 "은 끌어올려지지 않는다.

console.log(a);
var a = 2;

이렇게 생긴 코드가 있을 시 컴파일러는 자바스크립트 엔진이 인터프리팅을 하기 전에 컴파일을 한다. 이 때,

1. var a , 2. a = 2

이렇게 두개의 구문으로 본다는것이다.

따라서, 변수 a는 호이스팅이 되고 console에는 undefined라는 결과가 나온다.

함수 선언문의 경우도 호이스팅이 된다.

func();
function func() {console.log('함수 호이스팅')}

하지만 함수 호이스팅을 할 때 주의할 점이 있는데 . . . ! !

함수와 변수 선언문중에서는 함수 선언문이 먼저다.

func();
var func = function() { console.log('난 변수 호이스팅')}
function func() {
    console.log('난 함수 호이스팅')
}

동일한 이름으로 함수 , 변수 선언문이 있지만 함수 선언문의 호이스팅이 먼저기 때문에 console에는 ' 난 함수 호이스팅' 이 뜬다.

결론 = "var 쓰지마라"

• useState , useEffect를 사용한 간단한 예제 2가지를 정리해보자.

🚀 useState

1. 버튼 클릭시 숫자 카운터 예제

// Counter.js 파일에 해당 코드를 입력해준다.

import React, { useState } from "react";

const Counter = () => {
  // 기본값은 0으로 설정.
  const [value, setValue] = useState(0);

  return (
    <div>
      <p>
        현재 카운터 값은 <b>{value}</b>입니다.
      </p>
      // 상태를 설정하는 값인 setValue를 넣어주고 상태값에서 처리를 해준다.
      <button onClick={() => setValue(value + 1)}>+1</button>
      <button onClick={() => setValue(value - 1)}>-1</button>
    </div>
  );
};

export default Counter;

먼저 Counter라는 컴포넌트를 만들어준 뒤 setValue라는 useState 값을 선언해주고 useState의 함수 파라미터에는 기본값(0)을 넣어준다.

이 함수가 호출되면 배열이 반환되고 그 배열의 첫번째 원소는 상태 값 , 두번째 원소는 상태를 설정하는 값이 되는것이다. 이 함수에 파라미터를 넣어 호출하면 전달받은 파라미터로 값이 바뀌고 컴포넌트가 정상적으로 리렌더링 된다고 한다.

그래서 value 값은 기본값인 0부터 시작하고 +1인 버튼을 클릭했을 시 숫자가 하나씩 늘어나고 -1인 버튼을 클릭했을 시는 숫자가 하나씩 줄어드는것을 볼 수 있다.

2. useState 여러 번 사용하기

import React, { useState } from "react";

const Info = () => {
  const [name, setName] = useState("");
  const [nickname, setNickname] = useState("");

  const onChangeName = (e) => {
    setName(e.target.value);
  };

  const onChangeNickname = (e) => {
    setNickname(e.target.value);
  };

  return (
    <>
      <div>
        <input value={name} onChange={onChangeName} />
        <input value={nickname} onChange={onChangeNickname} />
      </div>

      <div>
        <div>
          <b>이름: </b>
          {name}
        </div>
        <div>
          <b>닉네임: </b>
          {nickname}
        </div>
      </div>
    </>
  );
};

export default Info;

이 예제같은 경우 이름을 저장하는 state 값과 닉네임을 저장하는 state 값 2개를 만들었는데 먼저 onChangeName이라는 함수를 선언해준 뒤 -> 상태를 설정하는 값인 setName에 이 onChange 이벤트가 발생하게 된 대상 값을 담아주고 -> 값이 들어오는 input 태그에 value 값을 첫번째 원소인 name 즉, 현재 상태값을 넣어주고

"onChange가 됐을 경우 이 함수를 실행해주세요!"

라고 선언해주면 input에 넣는 값이 아래 div 텍스트에 잘 들어가 있는것을 볼 수 있다!

🚀 useEffect

useEffect(() => {
    console.log("렌더링이 완료되었습니다!");
    console.log({
      name,
      nickname,
    });
  });

  useEffect(() => {
    console.log("effect");
    console.log(name);
    return () => {
      console.log("cleanup");
      console.log(name);
    };
    // 하단 [name] 부분이 파라미터 배열값이다.
  }, [name]); 

일단 useEffect란 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. 아까 실행했던 예제에 useEffect를 사용하여 알아보도록 하자.

첫번째 useEffect 같은 경우는 아까 처리해두었던 name과 nickname을 콘솔에 출력하게 되면 내가 input에 값을 적을때마다 콘솔에 찍히는걸 알 수 있다. -> 업데이트 될때마다 실행중.

두번째 useEffect 같은 경우는 마운트될 때만 실행하고자 하는건데 컴포넌트가 맨 처음 렌더링 될 때만 실행하고 , 업데이트 될때는 실행하지 않고자 하면 두번째 파라미터로 비어있는 배열을 넣어주면 되는것이다! 그러면 처음 새로고침을 했을때만 콘솔에 찍히는걸 볼 수 있다. -> 맨 처음 렌더링 될때만 실행.

즉 useEffect는 기본적으로 렌더링이 된 직후마다 실행되는데 두번째 파라미터에 무엇을 넣는지에 따라 실행되는 조건이 달라지는것이다. 컴포넌트가 언마운트 되기 전이나 업데이트 되기 전에 어떠한 작업을 수행하고 싶다면 뒷정리(cleanup) 함수를 반환해주면 된다.

+ 추가 예제

const Info = () => {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    console.log("effect");
    return () => {
      console.log("cleanup");
    };
  }, []);

  return (
    <>
      <div>
        <button type="button" onClick={() => setVisible(!visible)}>
          {visible ? "숨기기" : "보이기"}
        </button>
        {visible && <Info />}
      </div>
    </>
  );
};

이 예제는 button 태그를 이용해 보이기 버튼을 클릭시 Info 컴포넌트가 나타나고 보이기 버튼이 숨기기 버튼으로 바뀌게 된다. visible의 기본값이 false로 되어있기 때문에 false일 경우 보이기 버튼이 먼저 나오게 되고 이 버튼을 클릭할 시 false -> true 값으로 변하기 때문에 숨기기 버튼이 나타나게 된다. 그래서 이 예제는 렌더링될 때마다 뒷정리 함수가 계속 나타나는것을 확인할 수 있고 뒷정리 함수가 호출될 때는 업데이트 되기 직전의 값을 보여준다.

오직 언마운트될 때만 함수를 호출하고 싶다면 꼭 두번째 파라미터에 빈 배열을 넣어주면 되는것이다.

그럼 이렇게 보이기를 클릭시 Info 컴포넌트에 있던 컨텐츠가 나타나고 콘솔에도 나타날때 effect와 사라질때 cleanup 텍스트가 찍히는것을 알 수 있다.

리액트에서 수도 없이 쓰이는 useState와 useEffect를 예제와 함께 정리해보았다. 역시 근본은 기본기를 탄탄하게 쌓는거지! ✊