리액트 세미나 1 과제 공통 피드백

[woohm402]

다들 과제 진행하시느라 수고하셨습니다! 역시 아직 반 정도만 진행되었지만, 공통 피드백 시작하겠습니다.

---

PS스러운 코드

C로 알고리즘과 PS 공부를 하다가 개발에 처음 발을 디디면, flag 등의 기법을 사용하고 싶을 수 있습니다.
하지만 javascript에서는 대체적으로 let을 사용하지 않는 방향을 열심히 고민해 주셔야 합니다 (안되면 이슈로 남겨주세요!)

가령 아래와 같은 동명이인 체크 로직 코드는

let isStudentExist = false;
let foundStudent = null;
for (let i = 0; i < studentList.length; i++) {
  if (studentList[i].name === name && studentList[i].grade === grade) {
    isStudentExist = true;
    foundStudent = studentList[i];
  }
}

아래와 같이 쓸 수 있습니다. (isStudentExist는 !foundStudent 로 대체 가능하므로 따로 계산하지 않습니다)

const foundStudent = studentList.find(student => student.name === name && student.grade === grade);

물론 성능상 동일하지만, 개발을 하다 보면 코드의 간결함에 집중하지 않으면 코드 사이즈도 커지고 읽기도 힘들고 괜히 잘못 건드리기 무섭고 하는 코드가 생기게 됩니다. 이는 좋지 않은 디자인으로 간주되므로, 언제나 자바스크립트에서는 "로직의 간결함"에 집중해주시는 게 좋습니다. 다른 분야도 마찬가지이지만, 특히 자바스크립트가 좀 간결함에 집착하는 느낌이 있습니다.

state 구조

형제 컴포넌트에서 동일한 state를 사용하고 싶다면, 부모가 그 state를 가지고 있어야 합니다. 리액트에서는 자식이 부모에게 값을 직접 보내주는 건 "절대" 불가능합니다. 이 점 유의해 주세요! 부모 컴포넌트로 값을 보내고 싶다면 state를 부모로 올려주면 됩니다: state lifting

본 과제에서의 모범답안 state는 다음과 같습니다.

1. App.js
   • studentList: 학생 리스트 state
   • isModalOpen: 모달 열려있는지 state
   • selectedStudent: 선택된 학생 state
     • 또는 selectedId 를 놓고, 디테일 뷰에서 useEffect와 새로운 state를 이용해 데이터를 처리하는 방법도 나쁘진 않을 것 같습니다.
2. AdderModal.js
   • newStudentData: 새로 추가할 student에 저장될 데이터

이 외에 추가적인 state는 불필요합니다. 리액트에서는 항상 최소 개수의 state를 위해 노력해야 합니다. state가 많으면 많을수록, 관리해야 할 불필요한 state가 많아진다는 뜻입니다. state가 몇차원이어야 하는가에 집중하고, 간결한 state를 만들어 주세요.

변수명

• 이전에 이어서 또 강조드리는 변수명입니다.
• 의미를 명확하게 파악할 수 있도록
• 변수는 camelCase 컴포넌트는 PascalCase
• 언더바 사용하지 않음
• 제발 지켜주시기 바랍니다ㅠㅠ

안티패턴

• useState() 안에는 상수만 들어가는 게 좋습니다. 변수: props에서 꺼내온 데이터의 영향을 받는다든가, 다른 state의 영향을 받는다든가 하는 코드는 아주 예상치 못한 행동을 할 수 있습니다.
• parent에서 받아온 props를 내 state로 세팅하고 싶을 수 있습니다. 그럴 때는 세미나 2에서 배운 useEffect 훅을 사용하시는 게 좋습니다.

const Example = (props) => {
  const [state, setState] = useState();
  useEffect(() => {
    setState(props);
  }, []);
  ...

---

마지막으로 TA @ars-ki-00 께서 세미나 1 모범답안을 주말 내로 올려주시기로 하셨습니다! 사실 피드백이 가지 않은 부분은 모두 적당히 잘 구현해주신 부분이라고 생각하시면 되는데, 아무튼 본인 코드에 대한 확신을 가져보실 겸 하여 다들 꼭! 확인해주시기 바랍니다 👍

[kmsgm]

안녕하세요, 혹시 모범답안은 언제 올려주시나요?
코드 구조 관련해서 참고하고 싶어서요!