클린코드 리액트 state, props

useReducer

useState와 같이 상태를 get할수도 있고 set할수도 있다.

초기값으로는 첫번째 인자 : reducer, 두번째 인자 : 초기상태를 줘야한다. reducer에는 redux의 reducer와 비슷하다

const [state, dispatch] = useReducer(reducer, INUT_STATE)
// dispatch는 액션을 트리거한다.

[ reducer 정의 ]

사용할땐 dispatch를 사용해서 type을 바꿔줌으로써 상태를 변경할 수 있다. 

상태를 숨겨서 추상화를 시킬 수 있다. 

 

--- 

상태 로직 Custom Hooks으로 

useprefix를 지키면서 해야한다! 

jsx 문법을 제외한 로직을 따로 커스텀훅으로 빼서 사용할 수 있다. 

이렇게 하면 로직이 간단해보이고 재사용성을 높일 수 있으며, 필요한 부분만 사용할 수 있는 장점이 있다. 

여기서 커스텀훅을 사용할땐 use를 꼭 붙혀서 사용해야한다. 

 

---

이전 상태 활용하기

const PrevStrate = () => {
  const [count, setCount] = useState(1);
  const updateState = () => {
    setCount(count + 1); // setCount(1+1)
    setCount(count + 1); // setCount(1+1)
    setCount(count + 1); // setCount(1+1)
  };

  const updaterFunction = () => {
    setCount((prevCount) => prevCount + 1); // setCount(1+1)
    setCount((prevCount) => prevCount + 1); // setCount(2+1)
    setCount((prevCount) => prevCount + 1); // setCount(3+1)
  };
};

updateState, updaterFunction함수 두개는 언뜻보면 비슷해보이고 비슷한 동작을 할 것 같지만 

updateState는  이전상태를 참고하는게 아니라 갱신되기 전 상태를 바라볼 수 있어 타이밍적인 오류를 일으킬 수 있다. 

그래서 prev를 사용해서 이전상태를 가지고 와서 업데이트를 시켜야 원하는대로 결과를 확인할 수 있다.

 

---

Props

불필요한 PROPS 복사 및 연산

props로 value를 받아서 바로 사용하는게 아닌 어떠한 무거운 연산을 하는 로직을 담은 변수에 담아 사용하게 될 경우에 단점으로 

렌더링 될때마다 무거운 연산이 반복되기 때문에 부하가 걸릴 수 있다.

 이런 경우에 값비싸고 무거운 연산이 있다면 컴포넌트에 들어오기전에 처리되는게 좋다

컴포넌트에 꼭 들어와서 해야하는 이유가 있다면 

렌더링에 큰 무리를 주는 로직이라면 useMemo를 사용하는게 좋다. 

그게 아닌 렌더링에 무리를 주는 로직이 아니고 가벼운 로직이라면 그냥 위처럼 변수에 로직을 담아서 사용해도 좋다. 다만 제일 좋은건 컴포넌트 들어오기전에 처리를 하는 것이다.

 

 

중괄호(CURLY BRACES)사용법

언제 사용하는가?
jsx : 문자열에서는 {}를 생략하고 "" 만 사용해서 적어주는게 좋다. 

 

 

Single Quotes vs Double Quotes

1. 팀에서의 일반적인 일관성을 갖춘 규칙

2. HTML, javascript에서 다른지?

중요한건 프리티어를 잘 설정해서 일관성을 가지는게 좋다

 

 

알아두면 좋은 Props 네이밍

1. 리액트는 주로 컴포넌트명을 PascalCase를 사용한다.
그래서 props에 파스칼케이스로 사용하면 컴포넌트가 넘어간다라고 잘못 해석될 수 있기 때문에소문자로 시작해줘야 한다.

2. clean_code처럼 스네이크케이스를 사용하는것도 지양해주는게 좋다. 공백이 필요한곳에도 cleanCode이렇게 사용해주는게 좋다.

3. 컴포넌트를 내려줄때는 컴포넌트네이밍 형식으로 pascalCase를 사용해서 똑같이 내려주는게 좋다.

 

 

인라인 스타일 주의하기

여러 라이브러리가 있겠지만 라이브러리 없이 인라인 스타일을 수정하는 방법 

⬇️