Todo 앱을 다시 만들었다. 경험이 없다 보니 좋은 구조에 대한 여러 시행착오가 있었는데, 반복해서 할수록 어떠한 판단을 할 때 '이건 이런 문제가 생길 수 있어서 덜 좋다'라는 걸 생각하는 힘이 생기는 것 같아서 뿌듯했다. 물론 아직 부끄러울 정도로 부족한 실력이라, 앞으로 좀 더 많은 노력을 해야겠다.
유데미 클린코드 자바스크립트 강의를 들었다.
객체 구조 분해 할당을 최대한 많이 활용하자. 특히, 함수의 파라미터를 전달할 때 순서를 신경 쓰지 않아도 되도록 하거나, 필수이 파라미터와 옵셔널 한 파라미터를 구분할 수 있게 해 준다.
Object.freeze를 쓰면 객체를 동결할 수 있다(Read Only로 만들어준다). 단, Object.freeze는 참조 타입 복제처럼 얕은 동결로 실행된다. 재귀적으로 순회하며 객체 내부에 있는 모든 참조 타입을 동결하도록 util 함수를 만들거나, 아니면 lodash같은 라이브러리를 사용하자.
객체 내부에 있는 값을 직접 변경할 수 있게 접근이 쉽도록 구조를 만들면(Editable 하면) 프로그램의 안정성이 떨어지는 문제가 생길 수 있다. 별도 함수로 한 번 감싸서 객체에 접근해 직접 접근을 막거나, 또는 객체의 접근자 함수(getter, setter)를 사용하자.
객체 내부에 있는 프로퍼티를 참조해야 할 때, 경우에 따라 해당 프로퍼티가 존재할 수도 있고 존재하지 않을 수도 있는 상황이 생긴다. 그럴 때 존재하지 않는 프로퍼티를 참조하면 에러가 발생하기 때문에, 이런 경우는 사전에 잘 막아줘야 한다. 그때 옵셔널 체이닝(?,)을 사용할 수 있다. 비슷한 상황을 개발하면서 겪었던 것 같은데, 앞으론 옵셔널 체이닝을 사용하자.
오늘부터 React 공부를 시작했다. 강의를 듣거나 직접 써보기 전에 공식 문서를 읽으면서 큰 맥락이나 주요 개념을 먼저 공부해보려 한다. 아래는 오늘 읽은 공식문서 내용 중 일부다.
컴포넌트는 여러 개의 JSX 태그를 반환할 수 없다. 여러 개의 JSX 태그를 리턴해야 할 경우 <div></div> 또는 빈 태그(<></>)로 감싸줘야 한다. <></>는 Fragment 태그라고도 한다(<fragment></fragment>).
컴포넌트의 return 값은 JSX 태그를 반환한다.
React 컴포넌트는 일반 JavaScript 함수이지만, 이름은 대문자로 시작해야 하며 그렇지 않으면 작동하지 않는다.
컴포넌트 안에 다른 컴포넌트를 정의하면 안 된다. 컴포넌트들은 서로 의존적이면 안되고, 독립을 유지해야 한다(한 컴포넌트의 동작이 다른 컴포넌트의 결과에 영향을 미치면 안 된다).
JSX에서 class를 className으로 한 이유는 class가 자바스크립트의 예약어이기 때문이다(JSX 문법은 JavaScript로 이루어져 있다).
마찬가지로, 중괄호로 감싸서 전달하는 값을 카멜 케이스로 쓰는 이유도 자바스크립트의 변수명에 사용되는 방식이기 때문이다. 중괄호로 감싸 CSS 스타일을 인라인으로 전달할 땐 backgroud-color가 아니라 backgroundColor다.
Props는 컴포넌트 함수에 전달할 수 있는 유일한 인자다. 함수의 인수와 유사한 역할을 한다.
Props는 읽기 전용 스냅샷으로, 렌더링 할 때마다 새로운 버전의 props를 받는다. Props는 변경할 수 없고, 상호작용이 필요한 경우 state를 설정해야 합니다.
조건을 테스트하기 위해 JavaScript는 자동으로 왼쪽을 부울로 변환한다. 하지만 왼쪽이 0이면 전체 식이 (0)을 얻게 되고, React는 아무것도 아닌 0을 렌더링 한다(타입 변환을 통한 조건을 만들지 말고 명시적으로 만들자).
리액트에서 리스트(배열)를 렌더링 할 땐 반드시 key가 필요하다. 배열의 순서가 바뀌거나, 요소가 삭제되거나, 추가될 때 변경 사항을 파악하고 필요한 로직을 정확하게 적용하기 위해서이다.
리액트는 컴포넌트가 순수 함수일 거라고 가정한다. 즉, 리액트 컴포넌트에 같은 입력이 주어지면 언제나 같은 JSX를 반환하는 것을 가정한다. 그리고, 컴포넌트는 내부 동작에서 컴포넌트 렌더링 전에 존재했던 객체나 변수들을 변경하지 않는 걸 전제한다.
컴포넌트 내부에서 특정 변수를 변경하면 안 되고, 대신 setState 함수를 사용해야 한다.
컴포넌트 내부에서 정의된 변수가 해당 컴포넌트 내부에서 변경되는 것은 가능하다. 이러한 변형을 지역 변형이라고 하며, 외부의 다른 코드에 어떠한 영향도 주지 않는다.