내가 짠 코드가 정말 최선일까

오늘 할일은 프로필수정_성격이다.

 

일단 코드를 작성함에 있어서 api가 구현될 것이라고 가정하고 코드를 짜야하기에

 

더미데이터로 작성하였다. 하지만 api 들어왔을 경우를 대비해서 코드를 짜야한다. 연결이 쉽도록

 

 

그래서 오늘 할 일은 이것이었다. 

 

글로디에서는 성격 유형을 이렇게 '외향적인' 과 같은 어구로 받아서 관리한다.

 

그러면 성격컴포넌트는 선택된 성격 어구들을 가져다가 체크표시를 해주고 저 컴포넌트에서 관리하는 

성격 객체배열에 반영을 해야한다. 

 

버튼을 클릭하고 클릭 해제할때도 성격 객체 배열에 반영되어야한다.

 

구현 해야할 피그마 디자인 파일

---

구현한 화면

 

 

 

여기서 자신의 성격에 해당하는 어구를 선택하면

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

여기서는 그것을 반영하는 것이다

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

작성할 때 주안점으로 둔 것은

1. 과도한 렌더링을 방지하는 것 ( 이건 항상 생각해야한다 )

2. 컴포넌트 간에 성격 배열이 왔다갔다 한다.   컴포넌트에서 선택한 것을 서로 반영해야하는 상황이다.

   주고 받는 과정에서 쓸데없는 과정을 줄여야하고, 데이터를 잘 보존해야한다. 

 

그리고 자, 고민이 되는 것은 2가지이다.

 

Personality를 성격객체 배열을 map 돌면서 하나하나 찍어내는 방식인데 

 

첫번째 고민점 : 보면 전달한 props에 personalitys라고 성격객체 배열을 통째로 전달했다. setPersonalitys도 전달한다

ㄴ 어떻게 하고 싶은데? : 객체 배열을 통째로 가져오지 않고 그냥 state 수정함수만 가져와서 index에 해당하는 순서의 personality 객체의 isSelected 만 수정하는 것은 안될까?

 

두번째 고민점 : toggleStyle() 이 필요가 없을 것 같은데.. 

ㄴ 뭐가 문젠데? : pressed 그러니까 선택여부가 딱 정해지면 버튼토글핸들러 함수를 사용하지 않고 이 함수가 다시 렌더링될때에 알아서 style과 font가 수정되어 렌더링에 반영되었으면 좋겠다. 

하지만 문제는

  const [style, setStyle] = useState(
    pressed ? subStyles.container_pressed : subStyles.container_notPressed,
  );
  const [font, setFont] = useState(
    pressed ? subStyles.text_pressed : subStyles.text_notPressed,
  );

useState의 초기값은 처음의 렌더링 시에만 평가된다는 것이다. 그게 문제다. 

물론 그게 최적화에 좋으니 그렇게 정한 거겠지만.. 코드를 뭔가 줄이고 싶다. 

쉽고 가능한 짧게 코드를 작성하고 싶다

 

 

 

강의를 듣고 책을 읽어서 실력이 늘면, 꼭 너를 다시 리펙토링하러 오겠다.. 기다려라..

 

 

 

 

 

 

---

function Personality({
  personalityText,
  isSelected,
  setPersonalitys,
  index,
  personalitys,
}) {
  const newPersonalitys = [...personalitys];
  const [pressed, setPressed] = useState(isSelected);
  const [style, setStyle] = useState(
    pressed ? subStyles.container_pressed : subStyles.container_notPressed,
  );
  const [font, setFont] = useState(
    pressed ? subStyles.text_pressed : subStyles.text_notPressed,
  );

  function toggleStyle() {
    if (pressed) {
      setPressed(false);
      setStyle(subStyles.container_notPressed);
      setFont(subStyles.text_notPressed);
      newPersonalitys[index].isSelected = false;
      setPersonalitys(newPersonalitys);
    } else {
      setPressed(true);
      setStyle(subStyles.container_pressed);
      setFont(subStyles.text_pressed);
      newPersonalitys[index].isSelected = true;
      setPersonalitys(newPersonalitys);
    }
  }

  return (
    <Pressable style={[style]} onPress={toggleStyle}>
      <View>
        <Text style={[font]}>{personalityText}</Text>
      </View>
    </Pressable>
  );
}

[map을 돌때 찍어내는 성격컴포넌트]