먼저 우리 디자이너가 만든 귀여운 하트 편지지부터 보고 가요.

요즘 앱들을 사용해 보면 3D 애니메이션이 정말 많이 보인다. 그래서 우리 앱에도 적용시켜 보면 어떨까라는 의견이 나와서 해보기로 했다.

블렌더에서 추출된 파일 받아서 적용시키기

디자이너가 열심히 만든 .glb .gltf 확장자로 된 받아서 플러터에 적용시킬 수 있는데 여러 방법 중에 가장 간단하게 라이브러리를 사용해서 화면에 표시해 보기로 했다.

바로 flutter_3d_controller라는 라이브러리이다.

애니메이션을 시작, 정지, 처음 상태로 되돌리기나 카메라 조절 기능도 제공해준다.

Flutter3DController controller = Flutter3DController();
// ...
Flutter3DViewer(
    onLoad: (String modleAddress) {
        // 파일이 다 불러와졌을 경우
        controller.playAnimation();
    },
    controller: controller,
    src: 'assets/letter.glb',
);

먼저 컨트롤러를 선언한 다음 Flutter3DViewer 속성에 컨트롤러를 등록해 준다. src 속성에 파일 경로를 작성해 준 다음 onLoad에서 컨트롤러를 통해 애니메이션을 재생시켜주면 된다.

아직 라이브러리를 제대로 이해한 게 아니라서 .glb 파일로 표시하는 애니메이션의 경우 최적화나 사이즈 조절 등... 하는 방법을 찾아봐야 한다.

json 파일로 애니메이션 표시하기

위의 라이브러리를 써보면서 살짝 렉이 있는 듯한 느낌이 들어서, 우리 앱에 바로 적용시키기에는 힘들어 보였다. 그래서 우리 앱에서 이미 적용시킨 json (lottie) 방식을 사용하기로 결정했다.

이것도 역시 lottie라는 라이브러리를 쓰면 간단하게 화면에 애니메이션을 표시할 수 있다.

late final Future<LottieComposition> letter;

  @override
  void initState() {
    super.initState();
    letter = AssetLottie('assets/lottie/letter.json').load();
    checkPopup();
  }

먼저 json 파일을 불러와야 한다.

그 다음에는 FutureBuilder를 활용해서 이 파일이 다 불러와졌을 때 화면에 나타나도록 하면 된다.

FutureBuilder 비동기 작업이 완료될 때까지 기다렸다가 결과를 UI에 반영하는 데에 주로 사용됨. future 값에 비동기 함수를 전달하면 해당 상태에 따라 UI를 다르게 표시할 수 있다. snapshot.connectionState는 ConnecitonState로 비교하면 된다.

상태	설명	예제
waiting	future 작업 대기 중	로딩 UI
done	완료	데이터 표시
active	수신 중	주로 StreamBuilder 사용
none	Future가 null	기본 UI 표시

//...
FutureBuilder<LottieComposition>(
    future: letter,
    builder: (context, snapshot) {
        var lottie = snapshot.data;
        if (lottie != null) {
            // null이 아니라면, 다 불러와진 것.
            return Lottie(
                // 사이즈 등 옵션 주기
                composition: lottie,
            );
        } else {
            return Container();
        }
    }
)

위와 같이 작성해 보면

이렇게 귀여운 하트 편지지가 화면에 나타나게 된다.

팝업 애니메이션 적용시키기

아무래도 json 파일의 로딩이 완료된 후 나타나기 때문에 화면에는 갑자기 나타나기 때문에 사용자 입장에서는 레이아웃들이 밀려서 잘못 터치할 수 있겠다, 라는 생각이 들었다.

그래서 팝업이 나타나는 애니메이션을 줘서 미리 대비(?)할 수 있게 하는 게 어떨까 싶었다.

애니메이션 위젯의 크기를 알아내기

먼저 애니메이션이 포함된 위젯의 크기가 얼마인지 알아내야했다.

우리 앱에서는 height에 값을 주는 건 최소한으로 하고 padding 활용하여 UI를 구성하고 있다. 기기마다 해상도나 DPI가 다르기 때문에 고정된 값을 사용하면 특정 기기에서 레이아웃이 깨질 가능성이 있기 때문이다. 기기에 height 크기를 렌더링 하는 것을 맡기고 우리는 padding 같이 여백만 주면 다양한 기기에서도 일관된 UI를 유지할 수가 있다.

GlobalKey를 애니메이션 위젯에 적용한 다음, json 로딩이 끝났을 경우가 우리의 원하는 크기이므로 FutureBuilder를 활용해서 로딩이 끝났을 때의 크기를 가져오면 된다.

//...
if (lottie != null) {
    final RenderBox? containerRenderBox =
        containerKey.currentContext?.findRenderObject() as RenderBox?;

    if (containerRenderBox != null) {
        if (!isClose) {
            containerSize = containerRenderBox.size.height;
        }

    }
}

슬라이드 애니메이션 적용시키기

AnimatedContainer를 사용해서 height 값에 변화를 주면 아래로 밀리는 느낌의 애니메이션을 줄 수가 있다.

AnimatedContainer(
    height: containerSize,
    duration: const Duration(milliseconds: 300),
    onEnd: () {
        // 밀리는 애니메이션이 끝나면 팝업 표시
        if (isClose) return;
        setState(() {
            isLoading = false;
        });
        doPopup();
    },
),

팝업 애니메이션 적용시키기

저번에 활용했던 mixin 클래스를 써서 애니메이션을 분리시킨 뒤 애니메이션 먼저 만들어줬다.

mixin PopupAnimationMixin<T extends StatefulWidget>
    on State<T>, SingleTickerProviderStateMixin<T> {
  late AnimationController popupController;
  late Animation<double> popupAnimation;

  @override
  void initState() {
    super.initState();

    popupController = AnimationController(
      vsync: this,
      duration: const Duration(
        milliseconds: 300,
      ),
    );

    popupAnimation = Tween(begin: 0.0, end: 1.0).animate(
      CurvedAnimation(
        parent: popupController,
        curve: Curves.fastLinearToSlowEaseIn,
      ),
    );
  }

  @override
  void dispose() {
    popupController.dispose();
    super.dispose();
  }

  void doPopup() async {
    popupController.forward();
  }
}

또, 저번에 활용했던 AnimatedBuilder를 사용하여 Transform.scale과 Opacitiy 위젯을 쓰면 페이드인이 되면서 점점 커지는 애니메이션을 구현할 수 있다.

AnimatedBuilder(
    animation: popUpAnimation,
    builder: (context, child) {
        return isLoading
            ? Container()
            : Opacitiy(
                opacity: popUpanimation.value,
                child: Transform.scale(
                    scale: popupAnimation.value,
                    child: child,
                ),
            );
       child: // ...
    }
)

🤔 isLoading을 쓴 이유?

Transform.scale 같은 경우에는 value 값이 (0,0)이더라도 크기를 이미 차지하고 있기 때문에 위에서 적용시켰던 슬라이드 애니메이션이 보이지 않게 된다. 이미 공간을 차지하고 있기 때문에 애니메이션이 진행되고 있는 게 가려져서 보이지 않는 것.

그래서 isLoading으로 로딩 중일 때는 빈 컨테이너를 보여주고 로딩이 끝나면 팝업 위젯을 보여주는 식으로 했다.

Haptic 모바일 사용 환경에서 진동을 통해 사용자에게 반응을 전달하는 것. 키보드 입력 시, 미세한 진동으로 누르는 느낌을 주는 것 등이 있다.

이번에는 우리 앱에서 회원가입이나 로그인 할 때 이메일 형식에 맞지 않았을 경우 이메일 형식이 아니라는 문구와 함께 햅틱 피드백 그리고 흔들리는 효과를 적용해 보기로 했다.

✨ 디자인 요구 사항

이번에는 Protopie라는 디자인 프로그램으로 받았는데, 피그마와 연동을 해서 실제 기기에서 진동까지도 확인할 수 있었다.

실제로 얼마 만큼 흔들려야 하는지 (좌로 몇 xp 이동해야되는지) 값을 알고 싶었지만 유료 결제를 해야지만 볼 수 있었기에 따로 스크린샷을 받아 값을 이동 값을 확인했다.

오른쪽으로 100ms 동안 5px 이동 후 원래 위치로 돌아온 뒤 다시 오른쪽으로 100ms 동안 3px 이동 후 원래 위치로 돌아오고 또 오른쪽으로 100ms 동안 1px 이동 후 원래 위치로 돌아오는 애니메이션이다.

✨ 생각하기

🤔 어떻게 해볼까? (1)

플러터에서 위젯을 이동시키려면 뭘 써야 할까? 가장 처음에 떠오른 것은 Positioned였다.

Positioned는 Stack 위젯 내부에서만 쓸 수 있는 위젯인데 top left bottom right 값을 줘서 Stack 내부에서 원하는 위치에 위젯을 배치시킬 수 있다.

마치 CSS에서는 display: absolute; 안에 있는 요소들처럼 말이다.

❌ 하지만 쓸 수 없었다...

우리 앱에서 회원가입 화면에 그대로 적용시키기에는 여러 문제가 있었다.

// ...
Expanded(
    child: SingleChildScrollView(
        child: Column(
            children: [
                Padding( // 이메일 입력 칸
                    child: ...
                )
            ]
        )
    )
)

이런 구조로 되어 있었기 때문에 부모를 Stack으로 감싸고 Positioned에 top 등 위치 값을 주면 플러터에서는 Stack의 크기를 정확히 모른다는 에러가 발생했다.

수정하기 위해서는 아마도, 이 화면을 다시 만들어야겠다는 생각이 들었고 그렇기에는 시간이 너무 지체될 것 같아서 다른 방법을 떠올려 보려 했다.

🤔 어떻게 해볼까? (2)

Positioned를 쓸 수 있었다면 AnimatedPositioned를 활용해서 top 등, 위치 값에 변화를 줘서 애니메이션을 구현하려고 했었다.

다른 방법으로 애니메이션을 만드는 방법이 있을까? 👀

AnimatedBuilder를 써보면 되지 않을까? 🧐 이 위젯 내부에서 값을 변화를 줘서 이동시켜보자는 생각이 들었다.

그렇다면 위치를 이동시켜주는 위젯으로 뭘 쓰면 좋을까?

Transform이라는 위젯을 쓰면 우리가 원하는 애니메이션을 만들 수 있을 것 같았다.

Transform

자식 위젯을 회전, 크기 조정, 이동, 기울이기 등의 변형을 해주는 위젯

• rotate → Transform.rotate(angle: pi / 4) (45도 회전)
• translate → Transform.translate(offset: Offset(5, 0)) (x로 5만큼 이동)
• scale → Transform.scale(scale: 1.5) (1.5배 확대)
• skew → Transform.skewX(0.3) (x축으로 기울이기)

애니메이션으로 Offset 값만 변경시켜주면 될 것 같았다.

⭕ 정답입니다~

먼저 실제로 x 축으로 이동시킬 수 있는지 확인할 필요가 있었다.

AnimatedBuilder(
    animation: // ...animation,
    builder: (context, child) {
        return Transform.translate(
            offset: const Offset(20, 0),
            child: child,
        );
    },
    child: Column() // 이메일 입력 폼
)

위 코드와 같이 적용시켜 보니

내가 원하는 대로 x 축으로 20만큼 이동했다.

이제 Offset의 값을 애니메이션으로 위의 요구사항 대로 변경시켜주면 된다!

📱 구현하기

위젯도 이동시켰겠다, 어떻게 애니메이션을 만들어 보자.

먼저 든 생각은 아무리 간단한 애니메이션이라도 코드가 길어질 테니 분리시킬 필요가 있을 거라고 생각했다.

그래서 dart 언어의 mixin 클래스를 활용하기로 했다. mixin 클래스에 애니메이션 로직을 만들고 사용한다면 실제 이메일 폼을 구현하는 코드에서는 간결해져서 보기 편해질 것이다.

mixin 다중 상속 없이 여러 클래스에서 재사용할 수 있는 코드 블록 클래스를 상속받지 않고도 기능을 공유하여 사용할 수 있다.

mixin Bread {
    void buy() => print('우울해서 빵 샀어...');
}

class People with Bread {} // with 키워드로 Bread 적용

void main() {
    People().buy(); // 우울해서 빵 샀어...
}

⌨️ 애니메이션 작성

mixin JitterAnimation<T extends StatefulWidget> on State<T>, TickerProviderStateMixin<T> {
    // ...
}

먼저 위와 같이 mixin를 정의해 준다.

애니메이션 개수에 따라서 다른 프로바이더를 써야한다.

• SingleTickerProviderMixin → 애니메이션이 한 개일 경우 사용한다.
• TickerProviderStateMixin → 애니메이션이 두 개 이상일 경우 사용한다.

그런 다음 AnimationController와 Animation을 정의해 주면 된다.

// ...
  late AnimationController jitterAnimationController1;
  late AnimationController jitterAnimationController2;
  late AnimationController jitterAnimationController3;
  late AnimationController jitterAnimationController4;
  late AnimationController jitterAnimationController5;

  late Animation<double> jitterAnimation1;
  late Animation<double> jitterAnimation2;
  late Animation<double> jitterAnimation3;
  late Animation<double> jitterAnimation4;
  late Animation<double> jitterAnimation5;

  @override
  void iniState() {
      super.initState();

    jitterAnimationController1 = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 100),
    );

    jitterAnimationController2 = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 100),
    );

    jitterAnimationController3 = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 100),
    );

    jitterAnimationController4 = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 100),
    );

    jitterAnimationController5 = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 100),
    );

    jitterAnimation1 = Tween<double>(begin: 0, end: 5).animate(
      CurvedAnimation(
        parent: jitterAnimationController1,
        curve: const Cubic(0.65, 0, 0.35, 1),
      ),
    );

    jitterAnimation2 = Tween<double>(begin: 0, end: -5).animate(
      CurvedAnimation(
        parent: jitterAnimationController2,
        curve: const Cubic(0.65, 0, 0.35, 1),
      ),
    );

    jitterAnimation3 = Tween<double>(begin: 0, end: 3).animate(
      CurvedAnimation(
        parent: jitterAnimationController3,
        curve: const Cubic(0.65, 0, 0.35, 1),
      ),
    );

    jitterAnimation4 = Tween<double>(begin: 0, end: -3).animate(
      CurvedAnimation(
        parent: jitterAnimationController4,
        curve: const Cubic(0.65, 0, 0.35, 1),
      ),
    );

    jitterAnimation5 = Tween<double>(begin: 0, end: 1).animate(
      CurvedAnimation(
        parent: jitterAnimationController5,
        curve: const Cubic(0.65, 0, 0.35, 1),
      ),
    );
  }

  // 컨트롤러를 해제시켜서, 메모리 관리.
  @override
  void dispose() {
    jitterAnimationController1.dispose();
    jitterAnimationController2.dispose();
    jitterAnimationController3.dispose();
    jitterAnimationController4.dispose();
    jitterAnimationController5.dispose();
    super.dispose();
  }

애니메이션을 차례대로 진행시키기 위해서 저번에도 활용했었던 컨트롤러에 리스너를 추가해서 차례대로 실행시키기로 했다.

jitterAnimationController1.addStatusListener((status) async {
      if (status == AnimationStatus.completed) {
        jitterAnimationController2.forward();
      }
});

// ... 4번까지 같음

    jitterAnimationController5.addStatusListener((status) async {
      if (status == AnimationStatus.completed) {
        jitterAnimationController5.reverse(); // 1에서 0으로 되돌아가기
        jitterAnimationController1.reset(); // 초기 상태로 되돌리기
        jitterAnimationController2.reset();
        jitterAnimationController3.reset();
        jitterAnimationController4.reset();
      }
    });
  }

마지막으로 이 애니메이션을 실행시켜줄 트리거를 만들어준다.

void doJitter() {
    jitterAnimationConroller1.forward();
}

⌨️ 위젯에 적용시키기

mixin으로 정의된 것을 쓰고 싶다면 with 키워드로 상속받듯이 작성해주면 된다.

// ...
class _JoinEmailScreenState extends ConsumerState<JoinEmailScreen>
    with TickerProviderStateMixin, JitterAnimation {
// ...
AnimatedBuilder(
    animation: Listenable.merge([ // 여러 Listenable 객체를 하나로 합쳐서 한 번게 감지할 수 있게 하는 기능
        jitterAnimation1,
        jitterAnimation2,
        jitterAnimation3,
        jitterAnimation4,
        jitterAnimation5,
    ]),
    builder: (context, child) {
    // 모든 애니메이션의 value 값을 더함
    final offsetX = jitterAnimation1.value +
                    jitterAnimation2.value +
                    jitterAnimation3.value +
                    jitterAnimation4.value +
                    jitterAnimation5.value;
        return Transform.translate(
            // 더해진 값들을 offset으로 전달
            offset: const Offset(offsetX, 0),
            child: child,
        );
    },
    child: Column() // 이메일 입력 폼
)

이런 다음 이메일 형식에 맞지 않을 때마다 이 애니메이션을 실행시켜주면 된다.

  void nextButtonClick() {
    if (isAllFieldsValid()) {
      context.pushNamed(JoinCheckScreen.routeName);
      } else {
         doJitter();
      }
    }
  }

🥳 결과

🫨 햅틱 효과도 넣자

플러터에서 기본적으로 제공하는 HapticFeedBack이라는 클래스가 있어서 이걸 쓴다면 간단하게 햅틱 효과를 적용시킬 수 있다.

void doJitter() {
    // ...
    HapticFeedBack.HeavyImpact();
}

HapticFeedback 주요 메서드

자세한 진동 요구 사항은 없었기에 기본 제공하는 걸 썼지만 더 길게 진동이 되어야한다든지 등 다른 요구 사항이 있다면 어떻게 구현해야할지는... 그때 가서 생각해 보기로

🔨 살짝 개선시키기

코드를 다시 살펴보니,

어차피 같은 시간으로 x로 이동하고 되돌아오는데 각각 컨트롤러, 애니메이션을 만들어야 할까? 🤔

이런 생각이 들었고 줄여도 되겠다, 싶었다.

그래서 1번 애니메이션을 진행시킨 다음 reverse()로 초기 상태로 돌아가고 돌아가는 시간을 기다리기 위해서 Future.delay()를 썼다.

또 애니메이션이 진행 중일 때 버튼을 여러 번 누르면 애니메이션이 중첩되어서 실행될 것 같아서 isAnimation이라는 플래그를 추가해서 애니메이션이 진행 중일 때는 중첩되지 않도록 추가했다.

  late AnimationController jitterAnimationController1;
  late AnimationController jitterAnimationController2;
  late AnimationController jitterAnimationController3;

  late Animation<double> jitterAnimation1;
  late Animation<double> jitterAnimation2;
  late Animation<double> jitterAnimation3;

  bool isAnimation = false; // 애니메이션 진행 중인지 확인하기 위해

    jitterAnimationController1 = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 100),
    );

    jitterAnimationController2 = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 100),
    );

    jitterAnimationController3 = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 100),
    );

    jitterAnimation1 = Tween<double>(begin: 0, end: 5).animate(
      CurvedAnimation(
        parent: jitterAnimationController1,
        curve: const Cubic(0.65, 0, 0.35, 1),
      ),
    );

    jitterAnimation2 = Tween<double>(begin: 0, end: 3).animate(
      CurvedAnimation(
        parent: jitterAnimationController2,
        curve: const Cubic(0.65, 0, 0.35, 1),
      ),
    );

    jitterAnimation3 = Tween<double>(begin: 0, end: 1).animate(
      CurvedAnimation(
        parent: jitterAnimationController3,
        curve: const Cubic(0.65, 0, 0.35, 1),
      ),
    );

jitterAnimationController1.addStatusListener((status) async {
      if (status == AnimationStatus.completed) {
          jitterAnimationController1.reverse();
        await Future.delay(const Duration(milleSecond: 100));
        jitterAnimationController2.forward();
      }
});

// ... 2번까지 같음

    jitterAnimationController3.addStatusListener((status) async {
      if (status == AnimationStatus.completed) {
        jitterAnimationController3.reverse(); // 1에서 0으로 되돌아가기
        // reverse()로 초기 상태로 돌아갔기 때문에 reset()은 쓰지 않아도 됨.
        isAnimation = false;
      }
    });
  }

void doJitter() {
    if(isAnimation) return;
    isAnimation = true;
    jitterAnimationController1.forward();
}

with 디자이너의 벨로그 그리고 팀원의 벨로그

쉬운 것부터 하나씩, 서로 구현해 보고 싶은 애니메이션을 하기로 했다.

그 첫 번째로 아래와 같은 애니메이션이다.

먼저, 디자이너가 피그마로 이 애니메이션을 만들어 주었다. 나는 피그마를 참고해서 Curve 값이나, 속도 등을 그대로 적용시키기로 했다.

Linear인 줄 알았는데!

처음 만들 때, 값을 제대로 확인하지 않고 '이거, 같은 속도로 커지고 있다'고 생각해서 플러터에서 기본적으로 제공해 주는 Curves.linear를 적용시켜보았다. 하지만...

커지는 느낌이 너무 많이 달랐다. 그래서 값을 제대로 봐야겠다 싶어 피그마 값을 확인했다.

커지는 애니메이션에는 가속도가 있었다... 그렇다면, 내가 원하는 대로 커브 값을 줄 수 있을까?

물론 가능하다.

Curves의 구조를 보면 Cubic으로 직접 값을 줘서 구현한 것을 알 수 있는데 그렇다면 우리도 직접 값을 주면 점점 가속되거나 감속시킬 수 있지 않을까?

const Cubic(a,b,c,d);
// a와 b: 곡선의 시작 제어점(x1, y1)
// c와 d: 곡선의 끝 제어점(x2, y2)
// 0 <= x <= 1 범위의 값만 줘야함.

Stiffness Damping Mass 값을 어떤 식으로 계산해서 넣어야 하는지는 어려워서 채찍피티와 함께 했다.

그래서 구해준 값은...

const Cubic(0.23, 0.86, 0.29, 1)

이 값을 적용시켜 주니

비슷해졌다!

그 다음은 작아지면서 약간 통통 튀는 듯한 애니메이션을 줘야 한다. 즉, 애니메이션이 두 개가 연속으로 보여진다는 것이다.

어떻게 애니메이션을 연속으로 보여줄까 생각하다가 AnimationController에는 리스너를 추가할 수 있었고 AnimaitionStatus라는 enum도 있었다.

1번 애니메이션이 끝난다면, 2번 애니메이션을 진행시키자! 라는 생각이 들었다.

    extendController.addStatusListener((status) async {
      if (status == AnimationStatus.completed) {
        await Future.delayed(const Duration(milliseconds: 200));
        bounceController.forward();
      }
    });

위와 같이 작성했다. 200ms 딜레이를 넣은 이유는 첫 번째 애니메이션과 두 번째 애니메이션에 딜레이가 있다고 느꼈기 때문.

그리고, 애니메이션을 한 번만 재생시킬 게 아니기 때문에 두 번째 애니메이션이 끝나면 초기 상태로 되돌려 놓아야 했다.

   bounceController.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        extendController.reset();
        bounceController.reset();
      }
    });

이런 식으로.

bounce 느낌이 암튼 다름...

flutter에서는 여러 Curves를 제공해 주는데 그 중에서 당연히 튀기는 듯한 느낌은 bounceOut이 있다. 바로 적용시켜 보았는데...

음... 뭔가 강도가 약한 듯한 느낌이 들었다. 속도를 줄이면 너무 빨리 끝나서 튀기는 듯한 느낌이 들지 않았고 크기를 키우거나 줄이기에는 피그마의 애니메이션과 느낌이 매우 달랐다.

그렇다면 이것은 Curve를 커스텀해야 되겠다고 생각했다...

class CustomBounceCurve extends Curve {
  @override
  double transform(double t) {
    const double amplitude = 0.5;
    const double period = 0.4;

    if (t == 0.0) return 0.0;
    if (t == 1.0) return 1.0;

    return 1.0 -
        amplitude *
            pow(2.0, -10.0 * t) *
            sin((t - period / 4.0) * (2 * pi) / period);
  }
}

위 코드인데, 어떻게 구현해야 될지 몰라서 이것도 채찍피티와 함께 했다.

나중에는 함께 하지 않고도 구현할 수 있으면 좋겠다...

아무튼 이 Custon Curve를 적용시키고 보니

비슷해졌다!

정말 간단한 애니메이션인데도 많이 복잡했다. 그래도 이것저것 찾아보면서 재미는 있었다.

아직 복잡한 애니메이션을 구현할 실력은 없지만, 계속 하다 보면 언젠가 구현하게 될 수 있지 않을까...


GG

이것저것 찾아보다가 좋은 라이브러리를 발견했다. 바로 Sprung이라는 라이브러리이다.

Spring animation을 구현해주는 라이브러리인데 피그마에서 mass, stiffness, damping 값을 넘겨주면 알아서 적절한 커브를 만들어준다...!

    extendAnimation = Tween<double>(begin: start, end: end).animate(
      CurvedAnimation(
        parent: extendController,
        curve: Sprung.custom(
          mass: 1,
          stiffness: 250,
          damping: 31.6,
        ),
      ),
    );

시작하기 전에는 과연 끝낼 수 있을까 싶었는데... 어떻게든 되는 법이더라

하지만, 첫 배포 후에 보완해야 될 점이 정말 산더미처럼 많았다.

나와 팀원의 첫 프로젝트이고 출시까지 주어진 시간이 많이 짧았지만 무엇보다 앱 개발에 대한 지식이 거의 전무했던 점이 컸다.

그래서 우리 팀은 디자이너와 함께 디자인 QA를 진행하며 앱을 개선시키기로 했다.

그중에 첫 번째로 터치 영역인데, 사용하는 사람마다 '잘 눌리지 않는다'라는 말이 나왔다.

보통 아이콘 크기는 24px이 많이 쓰이는데, 터치 영역을 아이콘 만큼만 지정했기 때문에 '정확히 눌러야만' 터치했을 때 원하는 동작이 실행된다.

모바일에서는 '한 손으로' '엄지 손가락'으로 앱을 사용하는 경우가 대부분이기에 매번 정확히 누르기란 힘들 것이다.

그렇기에 터치 영역을 아이콘보다는 넓게 잡아서 앱 사용성을 좋게 만들어야 한다.

터치 영역 관련 수정은 내가 아닌 팀원이 정말 많이 고생해줬다... 나의 잘못이 여기저기에...

그 다음은, '슬라이드' 인터렉션에서 문제가 있었다.

위 화면을 자세히 보면 이전 문항에서 다음 문항으로 이동될 때 이전 문항과 다음 문항이 셔플되고(겹치고) 있기 때문에 사용자가 보기엔 어지럽고, 복잡해 보인다.

위 화면은 단순히 이전에서 다음 문항으로 이동하는 것만 있어서 덜 복잡하게 느낄 수도 있겠지만 다음 문항에서 이전 문항으로 이동될 때는 빙빙 돌 만큼 어지럽다.

그렇기에 셔플(겹치지)하지 않고 한 방향으로 흐를 수 있도록 수정할 필요가 있었다.

편안해졌다!

잘 만들어진 앱을 사용해 보면 정말 편안하다는 느낌을 받는다.

그 편안하다는 느낌이 들게 하기 위해, 얼마나 많은 시행착오 그리고 사용자의 시선을 고려했을까. 대단하다는 생각이 든다.

앞으로 이런 식으로 우리 팀은 디자이너와 꾸준히 소통하면서 앱을 개선해 나갈 생각이다.

Context API는 리액트 v16.3에 추가됐다. 이걸 활용하면 전역 상태 관리를 쉽게 사용할 수 있다.

문제점

하지만 이걸 전역 상태 관리로 쓰기에는 적합하지 않는 경우가 있다.

성능 문제

Context API 값을 구독한 모든 컴포넌트가 리렌더링되는 문제점이 있다. 만약 Context API로 상태를 전달했다면, 불필요한 컴포넌트까지 리렌더링이 돼서 성능이 하락할 수도 있다.

한 가지 상태만 관리 가능

앱이 커지면 관리해야될 상태가 많아지게 되는데 그러면 Context API를 사용하는 개수가 늘어나게 돼서 관리하기 어렵게 된다.

<AuthContext.Provider>
  <ThemeContext.Provider>
      <DataContext.Provider>
          // ...
      </DataContext.Provider>
  </ThemeContext.Provider>
</AuthContext.Provider>

다른 훅과 같이 써야 업데이트 가능

Context API는 단순히 상태를 전달하는 역할만 해서 useReducer나 setState를 같이 전달해야 상태를 업데이트할 수 있다.

전역 상태 관리 라이브러리를 쓰는 이유

Props Drilling 문제를 해결할 수 있다.

상태 관리 라이브러리들은 리렌더링 최적화 기능을 제공하는 경우가 있어서 불필요한 렌더링을 방지해준다.

상태의 변화를 추적하고 디버깅하기가 수월해진다.

Redux

Redux는 Flux 패턴을 따르는 자바스크립트에서 대표적인 상태 관리 라이브러리이다.

Flux 패턴은 단방향으로 데이터가 흐르는 패턴이다. 단방향으로 데이터가 이동하므로, 데이터 예측과 디버깅을 쉽게 할 수 있다.

Flux

Action

"무슨 일이 일어나고 있는지?" 액션은 어떤 일이 있는지 정의한다.

{
  type: "ADD", // 어떤 일인지
  payload: {id: 1, count: 1} // 데이터
}

Dispatch

디스패치는 액션을 스토어에 전달한다. 앱에서 어떤 일이 생겨야하는지 스토어에 알려주는 역할이다.

dispatch({type: "ADD", payload:{id: 1, count: 1}});

스토어

스토어는 앱의 전체 상태를 저장 및 관리하는 곳이다. 디스패치를 통해 액션을 받으면, 업데이트하고 새로운 상태를 만든다.

리듀서

리듀서는 스토어가 상태를 업데이트할 때 사용하는 함수다.

function addCount(state = [], action) {
  switch(action.type) {
    case "ADD":
      // 로직...
      return [...state, action.payload];
    default:
      return state;
  }
}

Subscribe

스토어는 상태가 바뀌면 모든 구독자들에게 알려준다. React에서는 이를 이용해서 리렌더링을 하게 된다.

장점

스토어 한 곳에서 상태를 괸리하게 되므로 편리하고 복잡한 상태 관리가 쉬워진다. 정해진 규칙에 따라 상태를 변경하므로, 변화를 예측하기 쉽다. 리덕스에서 제공하는 개발 도구를 사용해서 디버깅이 수월해진다. 여러 미들웨어 기능이 있어, 비동기 작업이나 로깅 등 기능 추가가 쉽다. redux-toolkit를 사용하면 리덕스를 쉽게 사용할 수 있다.

단점

'액션', '리듀서', '스토어' 같은 개념을 알아둬야한다.

아주 작은 기능이라고 해도, 리덕스로 구현하려면 액션, 리듀서 등, 미리 작성해야 하는 코드량이 많다.

추가 도구 없이(미들웨어 등) 기본 리덕스만으로는 한계가 있다. redux-thunk: 비동기 작업 처리 redux-saga: 복잡한 비동기 흐림 관리 redux-logger: 상태 변경 로그

리덕스와 다른 미들웨어까지 학습해야 하므로 러닝커브가 높아진다.

redux-toolkit 사용해보기

redux-toolkit를 쓰면 그냥 리덕스를 썼을 때보다 더 쉽게 상태 관리를 할 수 있다.

npm install redux redux-react @reduxjs/toolkit 먼저 위와 같이 총 3개를 설치해줘야 한다.

store 작성

스토어는 앱의 전체 상태를 저장 및 관리하는 곳이다.

// redux/store.ts
import { configureStore } from "@reduxjs/toolkit";

// 스토어 생성
const store = configureStore({
    reducer: {
      // reducer를 작성하는 곳.
    },
});

export default store;

그 다음 앱을 프로바이더로 감싸서 어느 곳에서든 스토어를 사용할 수 있게 해줘야 한다.

// main.tsx

import { Provider } from 'react-redux'
import store from './redux/store.ts'

createRoot(document.getElementById('root')!).render(
    <Provider store={store}>
      <App />
    </Provider>
);

slice 작성

slice는 redux-toolkit에서 상태 관리의 기본 단위이다. state와 reducer action을 한 곳에 모아둔 곳이다.

// redux/countSlice.tsx
const initialState = {
  count: 0,
}

먼저 상태의 초기 값을 선언해 준다. 그 다음 createSlice로 slice를 생성하면 된다.

// ...
import { createSlice } from "@reduxjs/toolkit";

export const countSlice = createSlice({
  name: 'count', // slice의 이름을 지정.
  initialState, // 상태의 초기 값
  reducers: {
    // 리듀서를 작성
    add: (state, action) => {
      // action에는 type과 payload가 들어있다.
      return state + action.payload;
    },
    sub: (state, action) => {
      return state - action.payload;
    },
  },
});

작성한 다음 이것을 다른 곳에서 쓸 수 있게 export 해주면 된다.

// ...
const reducer = countSlice.reducer;
export const countActions = countSlice.actions;
export default reducer;

작성이 끝난다면 이 리듀서를 스토어에 등록해줘야 한다.

// redux/store.ts

import { configureStore } from "@reduxjs/toolkit";
import countReducer from './countSlice';

const store = configureStore({
    reducer: {
        counter: countReducer, // 추가된 부분
    },
})

사용하기

실제 사용할 컴포넌트에서 사용려면 useDispatch useSelector를 사용하면 된다.

// counter.tsx
import { useDispatch, useSelector } from 'react-redux';
import { countActions } from '@/redux/countSlice';

const Counter = () => {
      const { add, sub } = countActions;
    const dispatch = useDispatch();
      const count = useSelector((state) => state.count);

    const handleAdd = () => {
        dispatch(add(10));
    }
    const handleSub = () => {
        dispatch(sub(10));
    }
    return (
        <div>
            <h2>{counter}</h2>
            <div>
                <button onClick={handleAdd}>++</button>
                <button onClick={handleSub}>--</button>
            </div>
        </div>
    )
};

export default Counter;

Jotai

Recoil이라는 상태 관리 라이브러리에 영감을 받아 만들었다고 한다. Atomic 방식으로 상태 관리를 한다고 한다.

작은 원자들을 하나씩 쌓아서 큰 형태로 만들어 나가는 느낌(bottom-up)으로 앱이 만들어진다고 한다.

리액트의 useState와 비슷하게 사용할 수 있어서 러닝 커브가 낮다.

설치

npm install jotai

상태 만들기

import { atom, useAtom } from "jotai";

const counter = atom<number>(0);

const App = () => {
  const [count, setCount] = useAtom(counter);

  return(
    <div>
      {count}<br />
      <button onClick={()=>setCount(prev => prev+1)}></button>
    </div>
  )
}

export default App;

마치 useState를 쓰듯이 사용하면 된다.

읽기 전용, 쓰기 전용

jotai는 읽기 전용으로도 쓰기 전용으로도 쓸 수 있다.

// ...
const count = useAtomValue(counter); // 읽기
const setCount = useSetAtom(counter); // 쓰기
// ...

좀 더 복잡한 작업을 해서 상태를 변경시킬 수도 있다.

const counterAction = atom((get) => get(counter), (get, set) => {
  const value = get(counter);
  const newValue = value + 1;
  set(counter, newValue);
});

이 action도 읽기, 쓰기만 할 수 있다.

// ...
const counterWithString = atom((get) => get(counter) + ' 번');
const onlyCounterWrite = atom(null, (get, set, newValue) => {
  set(counter, newValue);
});
// ...

비동기 atom도 지원해주는데 redux였다면 redux-thunk 같은 라이브러리를 설치해서 사용하는 경우가 많지만, jotai는 내부적으로 지원해준다.

// ...
export const asyncAtom = atom(async (get) => {
    await new Promise((resolve) => setTimeout(resolve, 5000));
    return get(counter);
});
// ...

이렇게 async로 atom을 만든 다음 사용할 때는 jotai에서 자체적으로 제공하는 loadable를 사용하면 된다.

// ...
  const loadableAtom = loadable(asyncAtom);
  const [value] = useAtom(loadableAtom);
// ...
<div>
  {
      value.state === 'hasError' && <div>ERROR</div>
  }
  {
      value.state === 'loading' && <div>LOADING</div>
  }
  {
      value.state === 'hasData' && <div>{value.data}</div>
  }
</div>

Provider

jotai는 기본적으로 전역으로 상태 관리를 해주지만 따로 분리시켜서 상태를 관리할 수 있다.

동일한 atom을 사용하더라도, Provider로 감싸면 내부의 상태는 독립적으로 작동한다.

import React from 'react';
import { atom, useAtom, Provider } from 'jotai';

const countAtom = atom(0);

const Counter = () => {
  const [count, setCount] = useAtom(countAtom);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
    </div>
  );
};

const App = () => (
  <div>
    <Provider>
      <h1>Counter 1</h1>
      <Counter />
    </Provider>
    <Provider>
      <h1>Counter 2</h1>
      <Counter />
    </Provider>
  </div>
);

export default App;

Zustand

redux와 비슷하게 스토어를 두고 상태 관리를 한다.

설치

npm i zustand

상태 만들기

스토어를 만든 다음, 초기값과 변경시킬 액션을 선언해 주면 된다. 보통 이름은 use(이름)Store으로 많이 한다.

// store/count.ts
import { create } from 'zustand';

export const useCountStore = create((get, set) => {
    count: 0,
      add: () => {
        const { count } = get();
        set({ count: count + 1 });
      },
});

get은 상태에서 값을 가져올 수 있는 함수이고 set은 상태의 값을 변경시킬 수 있는 함수이다.

get을 사용하지 않고 상태를 변경시킬 수도 있다.

// ...
    sub: () => {
      set(state => ({ count: state.count - 1 }));
    }
// ...

상태 사용하기

사용하고 싶은 컴포넌트에서 스토어 훅을 호출하면 상태와 액션을 얻을 수 있다. 상태가 변경될 경우, 컴포넌트는 다시 렌더링이 된다.

// App.tsx
import { useCountStore } from './store/count';

function App() {
  const count = useCountStore(state => state.count);
  const add = useCountStore(state => state.add);
  const sub = useCountStore(state => state.sub);
  return (
    <div>
      <h2>{count}</h2>
      <button onClick={add}>++</button>
      <button onClick={sub}>--</button>
    </div>
  )
}

콜백 없이도 스토어 훅에서 상태나 액션 등, 스토어 객체를 얻을 수 있지만 컴포넌트에서 사용하지 않는 상태가 변경되어도 렌더링되기 때문에 권장하진 않는다.

// ...
// count외에 min이나 max 등
// 이 컴포넌트에서 사용하지 않아도 min이 변경되면 다시 렌더링 된다.
const { count, add, sub } = useCountStore();

// ...

보통 액션은 많이 작성되기 때문에 이를 분리시켜서 스토어를 생성할 수도 있다.

export const useCountStoreAction = create<{
    count: number,
    actions: {
        add: () => void,
        sub: () => void,
    }
}>(set => ({
    count: 0,
    actions: {
        add: () => set(state => ({ count: state.count + 1 })),
        sub: () => set(state => ({ count: state.count - 1 })),
    },
}));

// --- cut ---
  const count = useCountStoreAction(state => state.count);
  const { add, sub } = useCountStoreAction(state => state.actions);

미들웨어 사용

zustand는 미들웨어를 사용할 수 있게 제공하는데 그 중 하나인 immer를 쓰면 중첩된 객체를 쉽게 변경할 수 있다.

먼저 immer를 설치한다. npm i immer

그 다음 아래와 같이 액션을 작성하면 된다.

import { immer } from 'zustand/middleware/immer';

export const useUserStore = create(
        immer<UserState & UserActions>(set => ({
            ...userInit,
            actions: {
                signIn: () => {
                    set({
                        user: {
                            email: 'abc@acb.net',
                            displayName: 'abc',
                            isValid: true,
                        }
                    })
                },
                setDisplayName: name => {
                    // immer 사용으로 짧아짐
                    set(state => {
                        if (state.user) {
                            state.user.displayName = name;
                        }
                    })
                }
            }
        }))
)

일반 CSS

가장 흔하고 일반적인 방식이다. css 파일을 따로 만들고 클래스나 아이디, 태그에 따라 스타일링하는 방법이다.

이름 짓는 규칙

프로젝트에 따라 이름 짓는 규칙은 다를 수도 있지만 가장 많이 쓰이는 방법은 BEM 네이밍이라는 것이 있다.

BEM

Block Element Modifier의 약자이다.

작명규칙

• 태그, id를 사용하지 않고 class만 사용한다.
• 개발, 디버깅, 유지 보수를 위하여 CSS 선택자의 이름을 가능한 한 명확하게 만든다.
• 소문자, 숫자만을 이용해서 작명한다.
• 여러 단어의 조합은 -로 연결하여 작명한다.
• 외형 묘사가 아닌 구조적, 의미적인 이름을 짓는다. class="red" [X] class="success" [O]

Block

서로 중첩될 수 있으며, 몇 겹으로 중첩되는 것도 허용된다. 상태가 아닌 용도를 나타내야 한다.

<!-- 용도: 에러인 것을 나타내고 있다. -->
<div class="error"></div>

<!-- 잘못된 사용: 상태를 나타내고 있다. -->
<div class="violet"></div>

외부의 환경에 의존적이지 않기 위해서 block 자체에 외부 여백(margin)이나, 위치(position)를 설정하지 않아야 한다.

Element

Block은 독립적이지만 Element는 블록에 의존적이다. 자식이 속한 불럭 내에서만 사용하며, 다른 곳에는 사용해서는 안 된다.

<!-- tab은 블록이고, __item은 엘리먼트이다. -->
<ul class="tab">
    <li class="tab__item">1</li>
    <li class="tab__item">2</li>
    <li class="tab__item">3</li>
</ul>

엘리먼트는 상태가 아닌 용도를 나타낸다.

여떤 용도인가? [O]
item, text, button

어떻게 생겼는가? [X]
big, small

Modifier

블럭이나, 엘리먼트의 속성이다. 상태 또는 동작을 정의한다.

<ul class="tab">
  <li class="tab__item tab__item--active">1</li>
  <li class="tab__item">2</li>
  <li class="tab__item">3</li>
</ul>

모양, 상태, 동작을 나타낸다.

• 사이즈, 테마: size_small, theme_black
• 상태: disabled, focused, active, selected
• 동작: move_left-top

Modifier는 블록, 엘리먼트의 모양, 상태, 동작을 변경하는 것이기 때문에 블록, 엘리먼트에 추가하여 사용한다.

CSS Selector

이것은 css의 기본적인 구조인데, h1 부분을 Selector(선택자)라고 한다.

전체 셀렉터

<!-- css reset -->
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*은 HTML 문서 내의 모든 요소를 선택한다. 한꺼번에 적용해야 하는 스타일할 때 적용할 때 주로 사용한다.

태그 셀렉터

p {
    font-size: 1.6rem;
}

지정한 태그에만 스타일을 적용시킬 때 사용한다.

rem과 em은 상대적인 단위를 나타낸다. 둘의 차이는 참조 기준에 따라 결정된다.

rem (Root em)

HTML의 루트 요소의 글꼴 크기를 기준으로 한다.

html {
    font-size: 16px;
}
p {
    font-size: 1rem; /* 16px */
}
h1 {
    font-size: 2rem; /* 32px */
}

em (Element em)

현재 요소의 글꼴 크기의 기준으로 한다.

html {
    font-size: 16px;
}
div {
    font-size: 1.5em; /* 24px */
}
div p {
    font-size: 1em; /* 24px */
}

ID 셀렉터

#nav {
    position: absolute;
}

선택한 id에 스타일을 적용시킬 때 사용한다.

클래스 셀렉터

.tab__item tab__item--active {
    color: blueviolet;
}

선택한 class에 스타일을 적용시킬 때 사용한다.

태그, ID, 클래스 복합 셀렉터

태그#id 태그.class id.class 요소를 구체적으로 지정하여 스타일을 적용시킬 때 사용한다.

/* p태그이면서 selected라는 클래스를 가진 요소 */
p.selected {
    color: blueviolet;
}

어트리뷰트 셀렉터

지정된 속성 값을 가지는 모든 요소를 선택하여 스타일을 적용시킬 때 사용한다.

a[href] {
    color: blueviolet;
}

후손 셀렉터

상위 요소의 하위에 속하는 모든 요소를 지정하여 스타일을 적용시킬 때 사용한다.

/* div 요소에 속해 있는 모든 p */
div p {
    font-color: white;

자식 셀렉터

상위 요소에 속해 있는 요소 중 바로 밑에 있는 요소를 지정하여 스타일을 적용시킬 때 사용한다.

div > p {
    color: blueviolet;
}

인접 형제 셀렉터

셀렉터 A의 형제 요소 중 셀렉터 A 바로 뒤에 위치하는 요소를 선택하여 스타일을 적용시킬 때 사용한다. 사이에 다른 요소가 존재하면 선택되지 않는다.

<style>
  p + ul {
      color: blueviolet;
  }
</style>
<p>Text</p>
<ul>
  <li>Text 01</li>
</ul>

일반 형제 셀렉터

셀렉터 A의 형제 요소 중, 셀렉터 A 뒤에 위치하는 셀렉터 B 요소를 모두 선택하여 스타일을 적용시킬 때 사용한다.

<style>
p ~ ul {
    color: blueviolet;
}
</style>
<div>
      <!-- 적용되지 않는다 -->
      <ul>
      <li>00</li>
      </ul>
    <p>Text</p>
    <!-- 적용된다 -->
    <ul>
        <li>01</li>
    </ul>
    <p>Text</p>
    <ul>
        <li>01</li>
    </ul>
</div>

가상 클래스 셀렉터

마우스가 들어왔을 때(hover)의 스타일을 적용시킬 때 사용한다.

div:hover {
    color: blueviolet;
}

구조 가상 클래스 셀렉터

:first-child: 셀렉터에 해당하는 모든 요소 중 첫번째 자식인 요소를 선택 :last-child: 셀렉터에 해당하는 모든 요소 중 마지막 자식인 요소를 선택 :nth-child(n): 셀렉터에 해당하는 모든 요소 중 앞에서 n번째 자식인 요소를 선택 :nth-last-child(n): 셀렉터에 해당하는 모든 요소 중 뒤에서 n번째 자식인 요소를 선택 :nth-child(odd): 셀렉터에 해당하는 모든 요소 중 홀수번째 자식인 요소 선택 nth-child(even): 셀렉터에 해당하는 모든 요소 중 짝수번째 자식인 요소 선택

부정 셀렉터

:not: 셀렉터에 해다되지 않는 모든 요소를 선택.

input:not([type=password]) {
    color: blueviolet;
}

가상 요소 셀렉터

::first-letter: 콘텐츠의 첫글자를 선택 ::first-line: 콘텐츠의 첫 줄을 선택. 블록 요소에만 적용할 수 있다 ::after: 콘텐츠의 뒤에 위치하는 공간을 선택. 일반적으로 content 어트리뷰트와 함께 사용된다 ::before: 콘텐츠의 앞에 위치하는 공간을 선택. 일반적으로 content 어트리뷰트와 함께 사용된다 ::selection: 드래그한 콘텐츠를 선택. iOS Safari 등 일부 브라우저에서 동작하지 않을 수도 있다.

css에서 변수 사용하기

:root {
    --primary-color: #6200EE;
}
div {
    color: var(--primary-color);
}

Sass

Syntactically Awesome Style Sheets의 약자로 CSS 전처리기이다. CSS를 더 효율적으로 작성할 수 있게 도와준다.

Sass는 Scss와 Sass 두 가지 구문을 지원하며 Scss는 css와 비슷한 문법을 사용하지만 Sass는 중괄호와 세미콜론을 사용하지 않아도 된다.

SASS

$primary-color: #0f0
$secondary-color: #f00

=button-styles
  background-color: $primary-color
  color: #fff
  padding: 10px 20px

button
  +button-styles

a
  color: $secondary-color

SCSS

$primary-color: #0f0;
$secondary-color: #f00;

@mixin button-styles {
  background-color: $primary-color;
  color: #fff;
  padding: 10px 20px;
}

button {
  @include button-styles;
}

a {
  color: $secondary-color;
}

Sass는 css 전처리기이기 때문에 브라우저가 이해하지 못하므로 Sass로 작성된 파일을 css로 컴파일 할 필요가 있다. 그래서 이를 변환해 주는 라이브러리를 설치해야 된다. npm install node-sass node-sass는 더 이상 지원하지 않는다고 해서 아래의 라이브러리를 설치했다. (vite 환경)

npm install -D sass-embedded

변수

$ 기호를 사용해서 변수를 정의할 수 있다.

/* 변수 정의 */
$primary-color: #6200EE
$secondary-color: #9654F4

/* 변수 사용 */
h1 {
    color: $primary-color;
}

중첩

선택자를 중첩하여 작성할 수 있다. 이를 통해 가독성을 높일 수 있다.

nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    li {
        display: inline-block;
        margin-right: 10px;
        a {
            color: #fff;
            text-decoration: none;
            &:hover {
                text-decoration: underline;
            }
        }
    }
}

Mixin

@mixin을 사용해서 스타일 블록을 정의하고 @include를 사용해서 해당 스타일 블록을 적용할 수 있다. 스타일을 재사용하고 더욱 간결하게 작성할 수 있다.

/* 믹스인 정의 */
@mixin text-style($font-size, $line-hiehgt, $text-color) {
    font-size: $font-size;
    line-hiehgt: $line-height;
    color: $text-color;
}

/* 믹스인 사용 */
h1 {
    @include text-style(24px, 1.2, #eee);
}
p {
    @include text-style(16px, 1.5, #666);
}

상속

@extend를 사용해서 스타일을 상속할 수 있다. 중복되는 스타일을 줄일 수 있다.

/* 스타일 정의 */
.btn {
    display: iline-block;
    padding: 8px 16px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    background-color: #EFE6FD;
    border-radius: 4px;
}

/* 스타일 상속 */
.btn-primary {
    @extend .btn;
    background-color: #5cb85c;
}

use

sass는 @mixin이나 변수를 다른 파일에 분리시켜서 가져올 수 있는데 예전에는 @import로 가져와서 썼지만 더 이상 사용할 수 없고 대신에 @use를 사용해서 가져와서 사용할 수 있다.

@use '가져올 파일명'로 가져온 다음 사용할 때는 가져온 파일명.변수명으로 사용하면 된다.

@use 'utils'
.SassComponent {
    display: flex;
    .box {
        background: red;
        cursor: pointer;
        transition: all 0.3s ease-in;
        &.red {
            background: utils.$red;
            @include utils.square(1)
        }
        &.orange {
            background: utils.$orange;
            @include utils.square(2)
        }
        &.yellow {
            background: utils.$yellow;
            @include utils.square(3)
        }
        &.green {
            background: utils.$green;
            @include utils.square(4)
        }
        &.blue {
            background: utils.$blue;
            @include utils.square(5)
        }
        &.indigo {
            background: utils.$indigo;
            @include utils.square(6)
        }
        &.violet {
            background: utils.$violet;
            @include utils.square(7)
        }
        &:hover {
            background: black;
        }
    }
}

scss 라이브러리를 설치하고 가져와서 사용하고 싶다면 아래와 같이 작성하면 된다.

/* as를 사용해서 대신할 이름을 지정할 수 있다 */
@use 'include-media' as im;
@use 'utils';

.SassComponent {
    display: flex;
    /* 가로 크기가 768px 이하면 적용된다 */
    @include im.media('<768px') {
        background: blueviolet;
    }
    /* ... */
}

path alias 사용하기

프로젝트를 진행하다보면 여러 파일을 import 하는 경우가 많다. 그럴 때마다 상대 경로로 가져오게 될 경우 ../../../../style.css와 같이 알아보기 힘들고 길어지는 경우가 있다.

그럴 때 path alias를 사용해서 가독성을 높여줄 수 있다.

지금 vite를 사용하고 있기 때문에 vite.config.ts에서 이것을 설정해 줄 수 있다.

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path';


// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      { find: "@/*", replacement: path.resolve(__dirname, "src") },
      {
        find: "@styles",
        replacement: path.resolve(__dirname, "src/styles"),
      }
    ]
  }
})

// tsconfig.app.json
// ...
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@styles/*": ["src/styles/*"],
    },
// ...

위와 같이 파일을 변경한 다음, 실제 사용하는 곳에서는

import '@styles/SassComponent.scss'

const SassComponent = () => {
    return (
        <div className="SassComponent">
            <div className="box red" />
            <div className="box orange" />
            <div className="box yellow" />
            <div className="box green" />
            <div className="box blue" />
            <div className="box indigo" />
            <div className="box violet" />
        </div>
    );
}

이런 식으로 사용해서 깔끔하게 작성할 수 있다.

CSS Module

CSS를 불러와서 사용할 때, 클래스 이름을 고유한 값으로 자동으로 만들어서 클래스 이름이 중첩되는 현상을 방지해주는 기술이다.

파일명을 이름.module.css로 작성해 주면 된다.

/* 클래스 이름을 자동으로 바꿔주므로 겹쳐도 된다 */
.wrapper {
    background: black;
    padding: 1rem;
    color: white;
    font-size: 2rem;
}

/* 전역으로 사용하고 싶다면 :global을 추가하자 */
:global .something {
    font-weight: 800;
    color: aqua;
}

import styles from '@styles/CSSModule.module.css';

const CSSModule = () => {
    return (
        <div className={styles.wrapper}>
            안녕하세요, 저는 <span className="something">CSS Module!</span>
        </div>
    );
}

클래스 이름이 _클래스이름_랜덤문자열으로 자동으로 생성됐다.

styled-component

CSS in JS 방식으로 CSS를 작성할 수 있게 해주는 라이브러리이다. 가장 대표적인 것이 styled-component이다.

CSS in JS 자바스크립트 파일 안에서 css를 작성하는 방식이다. 컴포넌트 단위로 스타일링을 할 수 있으며 자바스크립트의 변수와 로직을 사용해서 스타일을 동적으로 적용시킬 수 있다.

먼저 라이브러리를 설치해야 된다. npm install styled-component -D @types/styled-component

import styled, { css } from 'styled-components';

const Box = styled.div`
    /* props로 넣어 준 값을 직접 전달해 줄 수 있다 */
    background: ${props => props.color || 'blue'};
    padding: 1rem;
    display: flex;
`;

const Button = styled.button<{inverted?: boolean}>`
    background: white;
    color: black;
    border-radius: 4px;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 1rem;
    font-weight: 600;

    &:hover {
        background: rgba(255, 255, 255, 0.9);
    }

    ${props =>
        props.inverted && css`
            background: none;
            border: 2px solid white;
            color: white;
            &:hover {
                background: white;
                color: black;
            }
        `};
    & + button {
        margin-left: 1rem;
    }
`;


const StyledComponent = () => {
    return (
        <Box color="black">
            <Button>안녕하세요</Button>
            <Button inverted={true}>테두리만</Button>
        </Box>
    );
}

VS code의 익스텐션에서 vscode-styled-components를 설치하면 글자에 색상과 자동 완성이 돼서 작성이 수월해진다.

작동 원리

자바스크립트의 문법인 템플릿 리터럴를 사용해서 작동한다.

템플릿 리터럴

자바스크립트에서 문자열을 입력하는 방식 중 하나. 표현식, 문자열 삽입, 여러 줄 문자열, 물자열 형식화, 문자열 태깅 등의 기능을 제공한다.

기본 문법

`string text`
`string text line1
 string text line2
`

let expression;
`string text ${expression} string text`

function tag() { };
tag`string text ${expression} string text`

ES6 이전에는 아래와 같은 방법으로 문자열을 삽입했었다.

let a = 10;
let b = 7;
let c = "자바스크립트";
let text = "입력한 값은 " + (a + b) + "이며, " + c + "를 사용 중입니다.";

템플릿 리터럴에서는 아래와 같이 $와 {}를 사용해서 삽입할 수 있다.

let a = 10;
let b = 7;
let c = "자바스크립트";
let text = `입력한 값은 ${a+b}이며, ${c}를 사용 중입니다.`;

태그 템플릿

템플릿 리터럴의 발전된 형태이다. 태그를 사용하여 템플랫 리터럴을 함수로 파싱할 수 있다.

let person = 'Lee'
let age = 28;

let tag = function(strings, personExp, ageExp) {
  console.log(strings); // 첫 번째에는 배열이 들어온다
  console.log(personExp); // 두 번째에는 person 값이 들어온다
  console.log(ageExp); // 세 번째에는 age 값이 들어온다
}
let output = tag`that ${person} is a ${age}`;

function fn(strings, brand, items) {
    if(undefined === items) {
        return brand + "의 라면은 재고가 없습니다!";
    } else {
        return strings[0] + brand + strings[1] + items;
    }
}

console.log(fn`구매가능한 ${ramenList[0].brand}의 라면 : ${ramenList[0].items}`);
//구매가능한 농심의 라면 : 신라면,짜파게티,참치마요,둥지냉면
console.log(fn`구매가능한 ${ramenList[1].brand}의 라면 : ${ramenList[1].items}`);
//구매가능한 삼양의 라면 : 삼양라면,불닭볶음면
console.log(fn`구매가능한 ${ramenList[2].brand}의 라면 : ${ramenList[2].items}`);
//오뚜기의 라면은 재고가 없습니다!

스타일링된 엘리먼트 만들기

styled.태그명을 사용해서 만들면 된다.

const MyComponent = styled.div`
    font-size: 1.6rem;
`;
// ...
<MyComponent>
    나의 컴포넌트
</MyComponent>

const MyComponent2 = styled('div')`
    font-size: 3rem;
    color: blueviolet;
`;
// ...
<MyComponent2>
    나의 컴포넌트2
</MyComponent2>

스타일에서 props 쓰기

const Box = styled.div`
    /* props로 넣어 준 값을 직접 전달해 줄 수 있다. */
    background: ${props => props.color || 'blue'};
    padding: 1rem;
    display: flex;
`;

//...
        <Box color="black">
            <Button>안녕하세요</Button>
            <Button inverted={true}>테두리만</Button>
        </Box>

color라는 props를 줘서 배경 색상을 지정할 수 있다. 만약 color를 주지 않았다면 기본 색상으로 파란색이 나오도록 했다.

조건부 스타일링

기존에는 클래스에 조건부로 스타일링을 했었다면 styled-component에서는 props를 받아서 조건부로 스타일링 해줄 수 있다.

const Button = styled.button<{inverted?: boolean}>`
    /* ... */
    ${props =>
        props.inverted && css`
            background: none;
            border: 2px solid white;
            color: white;
            &:hover {
                background: white;
                color: black;
            }
        `};
`
// ...
<Button inverted={true}>테두리만</Button>

스타일 코드 여러 줄을 props에 따라 넣어야 할 때는 styled-component에서 제공하는 css를 사용해야한다.

css를 사용하지 않아도 작동은 하지만 문자열로 취급되어서 익스텐션의 신택스 하이라이팅이 되지 않고 태그 템플릿이 아니기 때문에 해당 부분에서는 props 값을 사용할 수 없게된다.

조건부 스타일링 부분에 props를 참조하지 않는다면 사용하지 않아도 상관없지만, 참조할 경우에는 반드시 css를 활용해서 태그 템플릿 기능을 사용하는 것이 좋다.

반응형 디자인

반응형 디자인도 가능한데, 일반 CSS에서 사용할 때처럼 media 쿼리를 사용하면 된다.

/* ... */
    /* 768px 미만이되면 화면을 꽉 채운다 */
    @media (max-width: 1024px) {
        width: 768px;
    }
    @media (max-width: 768px) {
        width: 100%;
    }
/* ... */

반응형 CSS를 함수화해서 여러 곳에서 재사용하는 방법도 있다.

const sizes = {
    desktop: 1024,
    tablet: 768,
}

type Sizes = typeof sizes;
type Media = {
    [Key in keyof Sizes]: (...args: Parameters<typeof css>) => CSSProp;
};
const media: Media = Object.keys(sizes).reduce((acc, label) => {
    const key = label as keyof Sizes;
    acc[key] = (...args) => css`
      @media (max-width: ${sizes[key] / 16}em) {
        ${css(...args)};
        }
    `;

    return acc;
}, {} as Media);
// ...
const Button = styled.button<{inverted?: boolean}>`
    /* ... */
    ${media.desktop`width: 768px;`}
    ${media.tablet`width: 100%;`}
    /* ... */

`

CSS 프레임워크

위 방법 외에도 Bootstrap Tailwind CSS 등이 있다.

클래스 컴포넌트는 여러 메서드들로 생명 주기 작업 처리를 해야되는데 복잡하고 관리하기 어려워질 수도 있다는 단점이 있다.

함수 컴포넌트에서 React Hooks를 활용하면 componentDidMount componentDidUpdate componentWillUnmount 등 클래스 컴포넌트에서는 나눠서 작성해야 됐던 작업들을 useEffect로 통합하여 관리하기가 좀 더 수월해졌다.

useState

리액트에서 가장 기본적인 hook이며, 상태를 관리할 수 있게 해준다.

function App() {
  const [count, setCount] = useState(0)

  return (
      <div>
        지금 카운트는 <b>{count}</b>입니다.
      </div>
  )

useState 함수의 파라미터에는 상태의 기본값을 넣어주면 된다. 이 함수는 배열을 반환하는데 첫 번째 원소는 상태 값, 두 번째 원소는 상태를 설정하는 함수이다.

상태를 변화시키고 싶다면 setState(x)를 쓰면 된다.

setCount(1);

값이 변했으므로, 컴포넌트는 리렌더링이 된다.

useState는 하나의 상태 값만 관리할 수 있다. 여러 상태를 관리하고 싶다면 useState를 여러 번 쓰면 된다.

function App() {
  const [count, setCount] = useState(0)
  const [skill, setSkill] = useState('react');

  return (
      <div>
        지금 카운트는 <b>{count}</b>입니다.
          지금은 {skill} 사용 중...
      <button onClick={() => setSkill('flutter')}>변경</button>
      </div>
  )

flushSync()

flushSync()는 React 18에서 추가된 함수인데 리액트에서는 setState가 비동기로 상태를 변경시키는데 flushSync() 안에서 setState를 호출할 경우 바로 DOM에 반영시킨다고 한다.

자주 사용할 경우 비동기 업데이트의 성능 최적화를 무시하고 동기적으로 처리하기 때문에, 성능에 영향을 미칠 수 있으므로 적절한 곳에 사용해야 한다.

//...
        flushSync(() => {
            setTodos(prev => {
                const lastEl = prev[prev.length-1];
                const newData: Item = {
                    id: lastEl.id +1,
                    task: input,
                };
                return [...prev, newData];
            });
        });
//...

useEffect

useEffect는 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 hook이다. componentDidMount와 componentDidUpdate를 합친 형태와 비슷하다.

보통 데이터를 가져오거나 이벤트를 등록할 때 많이 사용된다.

렌더링될 때마다 실행되게 하려면

컴포넌트가 새로 렌더링될 때마다 useEffect를 실행시키고 싶다면 아래와 같이 작성하면 된다.

useEffect(() => {

  console.log('마운트');

})

배열을 작성하지 않으면 이 useEffect는 렌더링될 때마다 작동하게 된다.

마운트될 때만 실행되게 하려면

컴포넌트가 마운트될 때만 실행되게 하고 싶다면 의존성 배열을 빈 배열로 설정하면 된다.

// ...
useEffect(() => {
  // 작업할 로직 작성
  console.log('마운트');

// 의존성 배열
},[])

특정 상태 값이 변할 때만 실행되게 하려면

컴포넌트에서 특정 상태 값이 변할 때만 실행되게 하려면 배열에 상태 값을 넣어주면 된다.

// ...
useEffect(() => {
  // 작업할 로직 작성
  console.log('count가 변했습니다.');

// 의존성 배열
},[count])

count가 변할 때만 실행되게 된다.

언마운트될 때 특정 작업을 처리하고 싶다면

return 안에 할 작업을 작성해 주면 된다. 이를 클린업(clean-up) 함수라고 한다.

등록된 이벤트를 없애는 작업에 사용되곤 한다.

// ...
useEffect(() => {
  // 작업할 로직 작성
  console.log('마운트');

  return () => {
    console.log('언마운트');
  }
// 의존성 배열
},[])

useLayoutEffect

useEffect와 사용 방법은 같지만 실행 시점이 다르다.

useLayoutEffect는 render 이후 DOM에 반영되기 전에 동기적으로 실행되는 함수이다.

useEffect는 render 이후 DOM에 반영된 후에 비동기적으로 실행되는 함수이다.

보통 useEffect만 써도 되지만, 성능의 문제나 애니메이션 시작 등, 화면에 바로 적용되어야 하는 요소가 있다면 useLayoutEffect를 쓰는 걸 고려해볼 수 있다.

useLayoutEffect는 동기적으로 작업되기 때문에 시간이 오래 걸리는 작업을 할 경우 작업이 끝난 후 DOM이 반영되므로 사용자 경험이 나빠질 수 있겠다.

useReducer

useReducer는 useState와 같은 상태를 관리해주는 훅이다.

useState와 하는 역할은 비슷하지만 좀 더 복잡한 상태 관리 로직이 있을 경우 바깥으로 꺼내어 작성할 수 있다.

useReudcer는 Flux 패턴의 단방향 데이터 흐름을 비슷하게나마 구현할 수 있다.

Flux 패턴

리액트를 만든 meta(facebook)에서 제안한 패턴이다. 단방향 데이터 흐름이 핵심이다.

• Action: 상태 변경을 요청한다.
• Dispatcher: Action을 받아 Reducer(or Store)에게 전달한다.
• Store: 애플리케이션의 상태를 관리하며, Action에 따라 상태를 변경한다.
• View: 상태를 기반으로 UI를 렌더링한다.

Action

<button onClick={() => dispatch({type: 'INCREMENT'})}>
    + 1
</button>
<button onClick={() => dispatch({type: 'DECREMENT'})}>
    - 1
</button>

dispatch 함수로 상태 변경을 요청하는 함수이다.

Reducer

const reducer = (state: number, action: Action) => {
    switch(action.type) {
        case 'INCREMENT':
            return state + 1;
        case 'DECREMENT':
            return state - 1;
        default:
            // 개발자가 지정한 action type 외에는 오류를 발생시켜서
            // state 기본 값을 보내는 것보단 잘못된 명령어임을 인지시키는 게 좋아보임.
            // 보통 오타일 경우가 많을 것 같다.
            throw new Error(`[ERROR] unknown action type - ${action.type}`);
        }
};

dispatch에서 보내는 Action의 타입을 받아서 내부 로직을 처리 후 새로운 상태를 반환한다.

state

const [state, dispatch] = useReducer(reducer, 0);

reducer에서 관리하는 상태이다. 첫 번째 매개변수로 reducer 함수, 두 번째 매개변수로는 초기 상태를 전달한다.

view

<div>
  <p>
      현재 카운터 값은 <b>{state}</b>입니다.
  </p>
  <button onClick={() => dispatch({type: 'INCREMENT'})}>
      + 1
  </button>
  <button onClick={() => dispatch({type: 'DECREMENT'})}>
      - 1
   </button>
</div>

state 기반으로 UI를 렌더링하고, dispatch로 Action을 보낸다.

그리고 더 넓은 범위에서 상태를 공유할 수 있는 useContext 훅도 있다.

useMemo, useCallback

useMemo

useMemo에서의 memo는 memozation을 뜻한다.

Memozation 동일한 계산을 반복해야할 경우, 한 번 계산한 결과를 메모리에 저장해둬서 중복 계산을 방지하는 방법이다.

리액트는 상태가 변할 때마다 컴포넌트를 다시 렌더링하게 되는데 만약 input의 상태를 관리하고 있다면 input의 값이 변할 때마다 onChange가 실행되고, onChange 함수는 input의 상태를 변경시키기 때문에 글자를 입력하거나, 지울 때마다 컴포넌트가 계속 리렌더링이 되어 효율이 떨어지게 된다.

이를 방지하기 위해서 상태의 값이 변경됐을 때만 리렌더링 할 수 있게 해주는 것이 useMemo이다.

const getAverage = (numbers: number[]) => {
    console.log('계산 중...');
    if (numbers.length === 0) return 0;
    const sum = (a: number, b: number) => a+b;
    return numbers.reduce(sum, 0);
}

만약 위의 함수가 매우 무거운 작업이라고 가정하고 아래의 컴포넌트를 만들었다고 가정하면

const Average = () => {
    const [list, setList] = useState<number[]>([]);
    const [number, setNumber] = useState('');

    const onChnage = (e: React.ChangeEvent<HTMLInputElement>) => {
        setNumber(e.target.value);
    }

    const onInsert = () => {
       const inputNumber = parseInt(number);
       if(isNaN(inputNumber)) return;
       const nextList = list.concat(inputNumber);
       setList(nextList);
       setNumber('');
    }

    return (
        <div>
            <input type="text" value={number} onChange={onChnage}/>
            <button onClick={onInsert} >등록</button>
            <ul>
                {
                    list.map((value, index) => (
                        <li key={index}>{value}</li>
                    ))
                }
            </ul>
            <div>
                <p>평균 값: </p> {getAverage(list)}
            </div>
        </div>
    )
};

이 컴포넌트는 input에 숫자가 입력될 때마다 렌더링이 되고 그때마다 getAervage 함수가 실행되게 된다.

getAverage가 매우 무거운 함수였다면, 렌더링되는 데 시간이 많이 소요되고 이는 사용자 경험이 나빠지는 것으로 이어지게 될 수도 있다.

그래서 list가 변할 때만 함수가 실행될 수 있도록 list 값을 기억해뒀다가 변경이 되었다면 getAverage 함수를 실행시켜서 반영시키는 것으로 최적화를 할 수 있다.

// ...
const avg = useMemo(() => {
        return getAverage(list);
    }, [list]);
return (
  // ...
  <p>평균 값: </p> {avg}
);

useCallback

useCallback도 useMemo와 비슷하다. useCallback은 함수 자체를 인자로 받아서 함수가 매 렌더링 때마다 다시 생성되는 걸 방지해주는 역할을 한다.

리렌더링될 때마다 함수 컴포넌트 안에 있는 내용들도 다시 생성되기 때문에 매번 새로운 함수 객체를 다시 할당받는 결과가 되고 이는 효율적이지 못하다.

물론 대부분의 상황에서는 문제가 없겠지만 컴포넌트가 자주 렌더링되는 상황이고 개수가 많아진다면 성능이 저하될 수도 있다.

    // 컴포넌트가 처음 생성될 때만 함수를 생성
    const onChangeUseCallback = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
        setNumber(e.target.value);
    },[]);

    // number 혹은 list가 변경되었을 때만 함수 생성
    //
    // []로 했을 경우 처음 생성됐을 상황을 기억하기 때문에
    // number나, list는 0 그리고 []이 된다.
    // 그래서 의존성 배열에 상태 값을 넣어줘야 한다.
    const onInsertUseCallback = useCallback(() => {
        const inputNumber = parseInt(number);
       if(isNaN(inputNumber)) return;
       const nextList = list.concat(inputNumber);
       setList(nextList);
       setNumber('');
    }, [number, list]);

숫자나 문자열, 객체같이 일반 값을 재사용하는 경우에는 useMemo를 함수를 재사용할 경우에는 useCallback을 사용하면 좋다.

useRef

useRef는 렌더링에 필요하지 않은 값을 참조할 수 있게 해준다.

일반 변수는 리렌더링될 때마다 다시 할당이 되지만, ref 객체는 동일한 객체를 반환하기 때문에 생명 주기 중 일정하게 정보를 기억할 수 있다.

useState로 관리되는 상태는 값이 변경될 경우 리렌더링이 되지만 ref 객체(ref.current)가 변경되더라도, 리렌더링이 되지 않기 때문에 정보를 기억할 수 있게 된다.

보통, DOM에 직접 접근해야될 때 DOM에 ref를 할당해서 포커스를 이동시키거나, 스크롤을 이동시키는 등의 작업을 할 수 있다.

const Average = () => {
  const inputRef = useRef(null);
  // ...
  const handleClick = () => {
    // ...
    ref.current?.focus();
  }
  return (
    <div>
        <input ref={inputRef} value={value} onChange={onChange} /><br />
          <button onClick={handleClick}>엔터!</button>
          <p>입력한 값은 {value}입니다.</p>
    </div>
  );
}

커스텀 훅

비슷한 기능을 공유할 경우 따로 빼내어서 자신만의 훅으로 만들 수도 있다. 이름은 마음대로 지어도 되지만 보통 use를 앞에 붙여서 짓는다.

useInputs

위에서 썼던 useReducer를 이용해서 커스텀 훅을 만든다고 한다면

import React, { useReducer } from "react";

const reducer = (state: any, action: React.ChangeEvent<HTMLInputElement>['target']) => {
    return {
        ...state,
        [action.name]: action.value,
    };
};

const useInputs = (init: any): [any, (e: React.ChangeEvent<HTMLInputElement>) => void] => {
    const [state, dispatch] = useReducer(reducer, init);
    const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        dispatch(e.target);
    };
    return [state, onChange];
}

export default useInputs;

이렇게 만들 수 있고, 이걸 실제 컴포넌트에서 쓸 경우에는

import useInputs from "./useInputs";

const Info = () => {
    const [state, onChange] = useInputs({
        name: '',
        nickName: '',
    });

    const { name, nickName } = state;
    return (
        <div>
      <div>
        <input name="name" value={name} onChange={onChange} />
        <input name="nickName" value={nickName} onChange={onChange} />
      </div>
      <div>
        <div>
          <b>이름:</b> {name}
        </div>
        <div>
          <b>닉네임: </b>
          {nickName}
        </div>
      </div>
    </div>   
    );
}

이런 식으로 활용할 수 있다. 커스텀 훅을 써서 컴포넌트의 가독성이 많이 좋아진 걸 알 수 있다.

useDebounce

디바운스는 가장 마지막에 생성된 이벤트만 실행되는 것이라고 할 수 있다.

예를 들어, 검색을 한다고 했을 때 한 글자마다 검색 요청을 보내면 네트워크 요청을 많이 하게 되고, 서버나 클라이언트에 부담을 많이 주게 된다.

그래서 사용자가 입력을 마칠 때까지 기다린 후 입력이 끝났을 때 검색 요청을 보내서 효율적으로 검색을 할 때 디바운스를 활용할 수 있다.

// useDebounce.ts
import { useEffect, useState } from "react"

const useDebounce = (value: any, delay = 500) => {
    const [state, setState] = useState(value);

    useEffect(() => {
        const handler = setTimeout(() => {
            setState(value);
        }, delay);

        return () => {
            clearTimeout(handler);
        }
    },[value, delay]);

    return state;
}

export default useDebounce;

import { useEffect, useState } from "react";
import useDebounce from "./useDebounce";

const Debounce = () => {
      const [search, setSearch] = useState('');
    const [data, setData] = useState([]);
    const debounceValue = useDebounce(search);

    useEffect(() => {
        const getData = async() => {
            return await fetch(`https://url.com/${debounceValue}`).then(res => {
                if(!res.ok) {
                    return Promise.reject('No Data');
                }
                return res.json();
            }).then(list => {
                setData(list);
            }).catch(err => console.error(err));
        }
        if(debounceValue) getData();
    },[debounceValue]);
  // ...
}

모든 리액트 컴포넌트에는 생명 주기가 존재한다.

컴포넌트가 렌더링됐을 때 특정 작업을 처리하고 싶거나 업데이트 전후로 해야될 작업이 있을 수도 있고 언마운트될 때도 해야될 작업이 있을 수도 있다.

이럴 때 컴포넌트의 생명 주기 활용하면 원하는 작업을 할 수 있다.

생명 주기 내에서는 여러 메서드가 호출되며 이를 사용할 수 있는데 클래스형 컴포넌트에서는 생명 주기 메서드들을 사용하고 함수형 컴포넌트에서는 hook 중에 하나인 useEffect()를 사용하는 점에서 차이가 있다.

현재는 함수형 컴포넌트를 사용하도록 권장하고 있기 때문에 클래스형 컴포넌트에서 쓰이는 생명 주기 메서드는 사용할 일이 없다.

생명 주기 종류

생명 주기는 크게 세 가지, 마운트 업데이트 언마운트로 나눌 수 있다.

컴포넌트 생명 주기

생명 주기 순서

마운트

컴포넌트가 생성되는 걸 마운트라고 한다.

1. constructor()를 호출한다. constructor()에서는 state를 초기화하는 등의 작업이 실행된다.
2. render()를 호출한다. render()에서는 화면에 표시되어야 될 내용(jsx)을 이해하고 DOM을 업데이트한다.
3. jsx가 DOM에 그려지면 componentDidmount()를 호출한다. 이 메서드는 마운트가 완료됐을 때 수행될 작업이 실행된다. (API 호출, DOM 속성 변경 등)

업데이트

컴포넌트가 변경되는 걸 업데이트라고 한다.

상태 변화를 감지하면 getDerivedStateFromProps()가 실행되고, 그 다음 화면에 표시될 내용을 다시 알아내기 위해 render() 실행된다. 그후, componentDidUpdate()가 실행된다.

getDerivedStateFromProps()는 16.3 버전 이후에 추가된 메서드이다. props로 받아온 값을 state에 동기화시키는 용도로 사용된다.

컴포넌트가 업데이트되는 경우는 네 가지가 있다.

1. 부모로부터 전달받은 props가 변경되거나.
2. state가 변경되거나.
3. 부모 컴포넌트가 리렌더링될 때.
4. forceUpdate()로 강제로 렌더링을 트리거할 때.

forceUpdate()는 클래스 컴포넌트에서만 사용 가능한 함수이다.

언마운트

componentWillUnmount()가 실행되며, 컴포넌트가 화면에서 사라지는 것을 언마운트라고 한다. 이것을 활용해서 API 연결을 해제하거나, setInterval로 함수를 반복 호출을 시켰다면, clearInterval 함수로 중단시키는 작업을 주로 처리한다.

componentDidCatch

클래스 컴포넌트의 생명 주기 메서드에서 에러가 발생했을 경우 실행되는 메서드이다. 함수 컴포넌트는 클래스 컴포넌트 생명 주기 메서드를 사용할 수 없어서 함수 컴포넌트에서 렌더링 중 에러 처리를 하고 싶다면 이 메서드를 활용한 컴포넌트를 만들고 감싸주어야 한다.

// ErrorBoundary.tsx
import { Component, ErrorInfo } from "react";
import ErrorComponent from "./ErrorComponent";

interface Props {
    children: React.ReactNode;
}

interface States {
    hasError: boolean;
    error: Error | null;
}

class ErrorBoundary extends Component<Props, States> {

    state: States = {
        hasError: false,
        error: null,
    }
    componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
        this.setState({
            hasError: true,
            error: error,
        });
        console.error({error, errorInfo});
    }
    render() {
        if (this.state.hasError) {
            return <ErrorComponent error={this.state.error}/>;
        }
        return this.props.children;
    }
}

// App.tsx

// ...
<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>
// ...

그 이유는 안드로이드에서 뒤로가기 키를 감지하려고 쓴 PopScope 위젯가 이유였다.

업그레이드 하기 전에는

PopScope(
    canPop: false, // 페이지를 pop시킬 건지
    onPopInvoked: (didPop) {
        // pop을 감지했을 때의 로직 작성
        context.pop();
      },
    child: Container(),
);

이런 식으로 페이지 이동을 막고 로직을 작성한 다음 context.pop()을 호출하는 식으로 처리했었는데

업그레이드 후에는

 // ...
 PopScope(
     canPop: false, // 페이지를 pop시킬 건지
     onPopInvokedWithResult: (didPop, result) {
         if(!didPop) {
            // 로직 작성
            context.pop();
        }
      },
    child: Container(),
);

onPopInvoked가 depreacted가 됐고, onPopInvokedWithResult로 변경되었으며, 작동 방식이 바뀌었다.

Object? result인 새로운 인자를 받게 되는데 아마 context.pop('text');에서의 'text'를 받아오는 게 아닐까 싶다.

canPop에 false 상태로 context.pop();을 호출해서 ` is not a true`라는 오류가 나왔던 것이다.~~

나중에 다시 해보니, 됐던 방법이 안 돼서 다시 고생한 결과

if(!didPop)으로 분기를 나눠준 뒤 페이지 이동시켜야 오류가 발생하지 않았다.

변경 로그를 읽어야겠다... 귀찮지만

그런데 똑같은 애니메이션인데,

매번 필요한 화면에서 initState()에서 초기화 해주고... dispose()에서 해제시키고...

매우 귀찮다

결국 방법은 있었으니, 잊지 않기 위해서.

import 'package:flutter/material.dart';

mixin DoubleFadeOutAnimationMixin<T extends StatefulWidget>
    on State<T>, TickerProviderStateMixin<T> {
  late AnimationController animationController01;
  late AnimationController animationController02;

  late Animation<double> animation01;
  late Animation<double> animation02;

  @override
  void initState() {
    super.initState();

    animationController01 = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    );

    animationController02 = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    );

    animation01 = Tween<double>(begin: 1.0, end: 0.0).animate(
      CurvedAnimation(
        parent: animationController01,
        curve: Curves.easeInOut,
      ),
    );
    animation02 = Tween<double>(begin: 1.0, end: 0.0).animate(
      CurvedAnimation(
        parent: animationController02,
        curve: Curves.easeInOut,
      ),
    );
  }

  @override
  void dispose() {
    animationController01.dispose();
    animationController02.dispose();
    super.dispose();
  }
}

dart에 있는 mixin class를 사용하면 되는데

클래스에 기능을 추가합니다. mixin은 복잡한 클래스의 계층 구조에서 코드를 재사용하는 방법 중 하나입니다.

그냥 확장(extends)해서 쓰면 되지 않음...?

하지만 dart에서는 extends로 단일 상속만 지원하기 때문에 이미 State<ScreenWidget>을 확장하고 있다면... 쓸 수가 없다.

그래서 mixin class로 만들고 이걸 함께 쓰겠다는 뜻으로 with를 쓰면 된다.

with는 여러 개를 가져다 쓸 수 있다 => 다중 상속

이놈을 실제 화면에서 쓰고 싶다면

class ExampleFadeScreen extends StatefulWidget {
  const ExampleFadeScreen({super.key});

  @override
  State<ExampleFadeScreen> createState() => _ExampleFadeScreenState();
}

class _ExampleFadeScreenState extends State<CoachMarkScreen> with TickerProviderStateMixin, DoubleFadeOutAnimationMixin<ExampleFadeScreen> {

    @override
    Widget build(BuildContext context) {
        return AnimatedBuilder(
            animation: animationController01,
            builder: (context, child) {
                return Opacity(
                    opacity: animation01.value,
                    child: Text('fadeout animation 01...');
                );
            },
        );
    }
}

애니메이션이 똑같다면, 이런 식으로 mixin class로 작성해두고 재사용하면 참 좋지 않을까.

nestjs Cli

npm install global @nestjs/cli or yarn global add @nestjs/cli

프로젝트 생성

아래와 같이 입력해서 cli로 생성

nest new project-name

이후 나타나는 선택지에서 사용하고 있는 패키지 관리 매니저를 선택하기 npm or yarn

컨트롤러 작성해 보기

@Get

@Get('name')

@Get('name/:name')

@Get('user')

nest-cli로 컨트롤러 생성하기

nest-cli에서 컨트롤러, 모듈 등을 자동으로 생성해주는 명령어를 제공해준다.

컨트롤러 생성

nest g co 컨트롤러 이름

controller 파일과 spec 파일이 생성되었다. spec은 테스트 용도로 생성되는 파일이다.

board로 컨트롤러를 생성해서, 컨트롤러 데코레이터 안에 board가 입력되어 생성된다.

또한, 자동으로 app.module.ts에 컨트롤러가 등록되어 있다.

네임 컨벤션

nestjs에서 파일 이름을 작성할 때, camelCase가 아닌, kekab-case를 사용한다. ex) user-profile.controller.ts

객체(혹은 배열)은 메모리 주소를 참조하는 식으로 변수가 할당된다.

그래서 let objB = objA; 이런 식으로 복사 효과를 바라고 했을 경우 objA를 수정하면 objB도 영향이 가고, 그 반대도 똑같다.

위에서 obj2는 obj1를 얕은 복사(shell copy)를 했는데, 새로운 참조 주소를 생성해서 name 속성을 그대로 복사해 온다. 하지만, detail 속성은 객체이므로, 같은 메모리 주소를 참조하게 된다.

그래서 obj1의 detail을 변경시키면 obj2의 detail도 변경되게 된다.

obj3는 깊은 복사(deep copy)를 했다. 위에서 나온 방법은 깊은 복사를 하는 여러 방법 중 하나이다.

객체 안에 있는 속성을 그대로 복사하게 되므로, obj1, obj2와 서로 영향을 끼치지 않아 obj1에서 그대로 복사해온 값인 17이 그대로 출력되게 된다.

class JumpingDots extends StatefulWidget {
  const JumpingDots({
    super.key,
    required this.size,
    required this.dots,
  });

  final double size; // 점 크기
  final int dots; // 점 갯수

  @override
  State<JumpingDots> createState() => _JumpingDotsState();
}

class _JumpingDotsState extends State<JumpingDots>
    with TickerProviderStateMixin {

    // 각 점마다 애니메이션을 주기 위해 List로 선언했다.
    // 위젯이 생성될 때 애니메이션을 적용하기 위함.
  late List<AnimationController> animationControllers;
  late List<Animation<double>> animations;

  @override
  void initState() {
    super.initState();
    _initAnimations();
  }

  @override
  void dispose() {
  // 위젯이 페이지에서 사라질 때, 모든 점들의 애니메이션도 dispsoe해줘야 한다.
    for (var controller in animationControllers) {
      controller.dispose();
    }
    super.dispose();
  }

  void _initAnimations() {
  // 리스트 생성으로 애니메이션 컨트롤러 등록.
    animationControllers = List.generate(
      widget.dots,
      (index) {
        return AnimationController(
          vsync: this,
          duration: const Duration(milliseconds: 500),
        );
      },
    );

    // 생성된 컨트롤러에 애니메이션 적용.
    animations = List.generate(
      widget.dots,
      (index) {
          // begin, end가 변할 범위이다.
        return Tween<double>(begin: 0, end: 5).animate(
          CurvedAnimation(
            parent: animationControllers[index],
            curve: Curves.easeInOut,
          ),
        );
      },
    );

    // 애니메이션에 딜레이를 줘서 차례대로? 움직이게 하기.
    for (int i = 0; i < animationControllers.length; i++) {
      Future.delayed(Duration(milliseconds: 300 * i)).then((_) {
        animationControllers[i].repeat(reverse: true);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: List.generate(animationControllers.length, (index) {
      // 애니메이션 빌더를 이용해야 한다.
        return AnimatedBuilder(
          animation: animations[index],
          builder: (context, child) {
              // Transform 위젯으로 y 값을 변화시킨다.
            return Transform.translate(
              offset: Offset(0, animations[index].value),
              child: Container(
                margin: const EdgeInsets.symmetric(horizontal: 2),
                height: widget.size,
                width: widget.size,
                decoration: const BoxDecoration(
                  color: Colors.black,
                  shape: BoxShape.circle,
                ),
              ),
            );
          },
        );
      }),
    );
  }
}

서버와 통신할 때, 데이터 모델을 직렬화하기 위해 쓰인다.

class DataModel {
  final String title, nick, content;

  DataModel.fromJson(Map<String, dynamic> json)
      : title = json['title'],
        about = json['nick'],
        genre = json['content'];
}

이런 식으로 작성하여 직렬화를 한다.

flutter 패키지 중에 이런 작업을 자동화해주는 패키지가 있다.

import 'package:json_annotation/json_annotation.dart';
part 'data_model.g.dart';

@JsonSerializable()
class DataModel {
    final String title, nick, content;

  DataModel({
  required this.title,
  required this.nick,
  required this.content,
 });

  factory DataModel.fromJson(Map<String, dynamic> json) => _$DataModelFromJson(json);
  Map<String, dynamic> toJson() => _$DataModelToJson(this);
}

어노테이션으로 @JsonSeriallizable()를 클래스 위에 작성하고 저장하면 패키지가 알아서 date_model.g.dart 파일을 생성하고 직렬화 코드를 작성해준다.

Retrofit

서버와 통신할 때 작성하는 코드 부분을 자동으로 생성해주는 역할을 해준다.

part 'free_repository.g.dart';

final freeRepositoryProvider = Provider((ref) {
  final url = '$baseUrl/board/free'; // 통신할 주소
  final dio = ref.watch(dioProvider); // dio provider
  final repository = FreeRepository(dio, baseUrl: url);
  return repository;
});

@RestApi()
abstract class FreeRepository {
  factory FreeRepository(Dio dio, {String baseUrl}) = _FreeRepository;

  // 전체 게시글 가져오기
  @GET('/')
  Future<FreeListModel> getLists({@Query('page') required int page});

  // ...
}

추상화 클래스 위에 @RestApi()를 작성하면, 패키지가 통신에 필요한 코드를 작성하여 새로 파일을 생성한다.

Dio Interceptor

Dio 패키지는 서버와 통신할 때 쓰는 패키지인데, 유용한 기능인 Interceptor가 있다.

뜻 그대로, 가로채는 것인데 요청 보내기 전, 요청 받기 전, 에러 받기 전에 어떤 작업을 할지 작성해 줄 수가 있다.

  @override
  void onRequest(
      RequestOptions options, RequestInterceptorHandler handler) async {

    if (options.headers['accessToken'] == 'true') {
      options.headers.remove('accessToken');

      final token = await storage.read(key: ACCESS_KEY);

      options.headers.addAll({'Authorization': token});
    }

    return super.onRequest(options, handler);
  }

다른 파일에서 서버와 통신하는 코드에서 헤더에 accessToken: true를 넣어서 보내면

Dio에서 서버로 보내기 전에, 헤더에 유저의 AccessToken으로 바꾼 후, 서버로 요청하게 된다.

로그 기록이나, 토큰이 만료됐을 경우, 리프레시 토큰을 이용하여 갱신하는 등의 작업이 가능할 것 같다.

Widget build(BuildContext context) {
return DefaultLayout(
    child: SafeArea(
        child: ...
        ),
    );
}

공통적으로 적용시키고 싶은 레이아웃을 적용시킬 수 있다.

showDialog의 경우, useRootNavigator의 기본값이 true이기 때문에 가장 가까운 navigator 정보가 아닌 루트(최상위) 정보를 가져오게 되는 것 같다.

rootNavigator가 한 개라면, 큰 문제가 발생하지 않을 듯... 하지만 여러 개일 경우(shellRoute를 사용한다든지), 문제가 발생하는 것 같다.

그래서 Theme 정보를 가져올 때도 오류가 발생했던 게 아닐까.

useRootNavigator가 true일 때, 최상위 위젯(Material App)이 루트가 됐다.

useRootNavigator가 false일 때, 가장 가까운 위젯 트리의 부모(Profile)이 루트가 됐다.

텍스트 필드 생성 클래스

import 'package:flutter/material.dart';

class RenderTextField extends StatelessWidget {
  const RenderTextField({
    super.key,
    required this.label,
    required this.onSaved,
    required this.validator,
  });

  final String label; // 라벨 표시 ex) 아이디
  final FormFieldSetter onSaved; // 전송이나 저장 버튼 눌렀을 시 변수에 저장하는 함수
  final FormFieldValidator validator; // 값을 검증하는 함수

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          children: [
            Text(
              label,
              style: TextStyle(
                fontSize: Theme.of(context).textTheme.displayLarge?.fontSize,
                color: Theme.of(context).colorScheme.primary,
              ),
            ),
          ],
        ),
        TextFormField(
          onSaved: onSaved,
          validator: validator,
          autovalidateMode: AutovalidateMode.always, // 검증 함수를 실시간으로 실행(?)해주는 듯.
          decoration: InputDecoration(
            filled: true,
            fillColor: Colors.grey[200],
          ),
        ),
        const SizedBox(height: 20,),
      ],
    );
  }
}

실제 화면에서 사용

final formKey = GlobalKey<FormState>();
final String id = '';
final String pw = '';

  renderButton() {
    return ElevatedButton(
      onPressed: () async {
        if (formKey.currentState!.validate()) { // 검증 통과 시 true가 반환되는 듯.
          debugPrint('통과됨');
          formKey.currentState!.save(); // 변수에 저장이 된다.
        }
      },
      child: const Text(
        '테스트',
        style: TextStyle(color: Colors.black, fontSize: 16),
      ),
    );
  }
// ...
Form(
  key: formKey,
  child: Column(
    children: [
      RenderTextField(
        label: '아이디',
        onSaved: (value) {
             setState(() {
              this.id = value;
          }
        },
        validator: (value) {
          if(value.length < 1) return '반드시 입력해야 합니다';
          if(value.length < 4) return '4글자 이상 입력해야 합니다';
          return null;
        },
      ),
      RenderTextField(
        label: '비밀번호',
        onSaved: (value) {
           setState(() {
              this.id = value;
          }
        },
        validator: (value) {
          if(value.length < 1) return '반드시 입력해야 합니다';
          if(value.length < 8) return '8글자 이상 입력해야 합니다';
          return null;
        },
      ),
      const SizedBox(
          height: 10,
      ),
      renderButton(),
    ],
  ),
),
// ...