TIL 18 | React 불필요한 state 값 줄이기

2차 프로젝트 겟원티드를 시작한지 1주차! 이번에는 로그인과 회원가입을 구현해보았다. 2차 프로젝트는 클래스형 컴포넌트 대신 함수형 컴포넌트를 써보면서 익숙해 지는데 시간이 조금 걸린 것 같다.

styled 컴포넌트도 써보면서 처음에는 불편했지만 익숙해지고 나니 css에서도 props를 받아서 삼항 연산을 할 수 있어서 좋았던 것 같다.

오늘은 로그인 부분에서 멘토 성훈님께 리뷰 받은 부분을 다시 한번 기억하고자 기록해본다!

리뷰 전 코드

import React, { useState } from 'react';
import styled from 'styled-components';

const Login = props => {
  const [email, setEmail] = useState('');
  const [isEmail, setEmailCheck] = useState(false);

const valueInput = e => {
    const { value } = e.target;

    setEmail(value);
    email.length > 2 && email.includes('@') && setEmailCheck(false);

 const emailValidator = email => {
    email === '' && setEmailCheck(true);
    (email !== '' && email.includes('@')) || setEmailCheck(true);

return 부분

return (

<CheckP isEmail={isEmail}>
올바른 이메일 형식이 아닙니다
                  </CheckP>

styled 컴포넌트 부분

const CheckP = styled.div`
  display: ${props => (props.isEmail ? 'block' : 'none')};

isEmail 값이 true면 display: block 으로 false면 display: none

리뷰 내용

리뷰 후 수정한 코드

import React, { useState } from 'react';
import styled from 'styled-components';

const Login = props => {
  const [email, setEmail] = useState('');

const [isEmail, setEmailCheck] = useState(false);

const valueInput = e => {
    const { value } = e.target;

    setEmail(value);

email.length > 2 && email.includes('@') && setEmailCheck(false);

const emailValidator = email => {
email === '' && setEmailCheck(true);
(email !== '' && email.includes('@')) || setEmailCheck(true);

불필요한 부분 삭제하고 props로 넘겨주는 부분에서 바로 계산!

return (

<CheckP isEmail={email.length === 0 || email.includes('@')}>
</CheckP>

이와 같이 불필요한 state값과 코드를 줄일 수 있었다!

오늘 다시 한번 기억할 점!

기존의 state 값에서 계산 할수 있는값 이었던 isEmail 을 만들지 않고 효율적으로 관리 할 수 있다!

계산 할수 있는 값을 새로운 state로 만들지 말자! 꼼꼼하게 리뷰해주신 성훈 멘토님 덕분에 또 하나 배워갑니다!