2024-05-17 스탠다드 특강 2회차

이번 과제에서 공통 피드백

느슨한 비교와 엄격한 비교

// 느슨한 비교
console.log( 5 == "5" ); // true

// 엄격한 비교
console.log( 5 === "5" ); // false

느슨한 비교는 특별한 경우가 아니면 무조건 엄격한 비교를 우선적으로 사용하도록 한다.

이유는 느슨한 비교를 하게 되면 코드 실행 기대값은 같더라도 코드를 읽는 사람이 한 번 더 생각을 해야 되기 때문에 시간이 오래 걸리고,

코드 실행적인 측면에서도 의도치 않은 에러를 발생시킬 수 있다.

const vs let

변수 선언할 때 무조건 const로 선언한다고 생각한다.

그리고 이후 재할당이 필요한 경우 let으로 바꾼다.

이유는 let으로 변수를 선언한 경우, 값이 재할당 된다고 생각되기 때문에 코드를 읽는 사람이 개발자가 명시적으로 let으로 변수를 선언했다고 오해할 수 있다.

제어컴포넌트

input과 같이 form 태그 안에 포함되는, 즉 사용자 입력을 받는 특정 태그들을 누가 제어를 하느냐

리액트가 제어를 하면 제어컴포넌트, 리액트가 제어하지 않으면 비제어컴포넌트이다.

즉, 상태를 통해 값이 바뀌는 것을 관리하고 화면을 리렌더링하는 것을 제어컴포넌트라고 한다.

리액트의 핵심 개념 : 상태가 바뀌면 => 리렌더링된다. (화면을 다시 그린다.)

즉 사용자에게 값을 form 태그를 통해 값을 입력받는 다면 => 그것은 상태로 관리하고 있을 것이고 => 그 상태가 변경되면, 즉 사용자가 값을 입력하면 => 화면을 다시 그린다.(리렌더링 한다)

상태에서 jax로 데이터를 {} 중괄호를 통해 보내는 것을 데이터 바인딩 한다고 이야기 한다.

input으로 받은 모든 value는 string 타입이다.

const [age, setAge] = useState(0);
// useState에 초기값으로 아무 것도 없는 빈 값을 넣는 경우가 있는데 그건 undefined를 넣는 것과 똑같다.
// 따라서 배열로 관리할 거면 배열 형태로 초기값을 해주고,
// 숫자면 숫자로 넣어줘야 한다.
// 초기값으로 지정해 둔 형태를 벗어나는 값을 setAge로 가져오면 안 됨.

setAge(event.target.value);

return (
    <input type="number" value={age} onChange={handleChange}>
)
// input type이 number여도 input으로 받는 값은
// 무조건 string이다. 따라서 숫자를 받고 싶으면
// 받은 value를 단항 연산자 +를 쓰든지 해서
// 숫자로 형 변환 해주어야 함.

유효성 검사 시 두 가지 방법 (early return vs if...else)

// early return
const addUser = (e) => {
    e.preventDefault();
    if (!name || !age) {
      alert("이름과 나이를 모두 입력해주세요.");
      return;
    }

    setUsers([...users, { id: Date.now(), name, age }]);
};


// if/else
const addUser = (e) => {
    e.preventDefault();
    if (!name || !age) {
      alert("이름과 나이를 모두 입력해주세요.");
    } else {
        setUsers([...users, { id: Date.now(), name, age }]);
      }
};

일반적으로는 early return 방식이 많이 쓰임.

유효성 검사를 통과하지 못했을 때(input에서 빈 값을 받았을 때) 함수를 return으로 종료시켜버릴 수 있는데, 이것을 early return 방식이라 하고,

if...else를 사용하게 되면, 유효성 검사를 통과하면 if문의 코드 블럭을 실행하고... (예를 들어 '값을 입력하세요'라는 경고를 띄우고)

통과하면 else문을 실행하도록 코드를 짤 텐데, else문에서 실행할 코드가 한 두 가지가 아니면, else문 안에 계속 코드가 중첩되어 들어감.

따라서 가독성이 흐려지므로 추천하는 방식은 아님.

변수명 단수, 복수 엄격히 구분

const ages = 30;
// 나이가 왜 복수인가?라는 의문이 들 수 있음.
// 의문만 들면 다행인데 아래 코드를 보면

const user = [{id:1, name:'장원영'}]
// user라는 변수명만 보면 1명의 유저일 거라고 생각하지만
// 데이터 타입이 배열로 되어 있으면 코드를 읽는 사람이
// 혼란스러울 수 있다.
// 따라서 단수, 복수를 명확히 구분해주도록 한다.

prettier 설정을 하자.

VSCode 코드 extension에서 prettier를 설치한다.

1. cmd + , 눌러서 검색창 연 후
2. default for... 를 prettier를 잡는다.
3. format on save를 체크한다.

팀 프로젝트를 할 때는 .prettier 파일을 만들어서 공통의 포매팅 파일을 만들고 시작하는 것이 좋다.

리스트 렌더링 시 key 값은 unique하게 바꾸자.

// 
{users.map((user) => (
      <li key={{ user }}>
          이름: {user.name} 나이:{user.age}
          <button onClick={() => removeUser(user.id)}>삭제</button>
      </li>
))}

<li key={{ user }}>
// user를 감싸고 있는 중괄호가 두 개인데, key = {}는
// 자바스크립트 표현식을 쓰겠다는 기호이다.
// 그리고 user를 감싸고 있는 가장 안쪽의 중괄호 {}

리액트의 동작 원리를 보면 기존의 가상돔과 신규 가상돔을 비교해서 변화된 부분만 리렌더링 하라고 웹 브라우저에게 명령을 내리는 것이 그 핵심 원리이다.

그런데 key값을 위처럼 unique하지 않게 user라는 고정된 값을 넣으면 user라는 key를 가진 요소들이 전부 리렌더링 된다.

이는 리액트를 사용하는 가장 큰 메리트를 포기하는 것과 같기 때문에, 달라지는 변화의 차이를 감지하기 위해선 요소가 수천 개가 되더라도 구분할 수 있도록 date.now()와 같은 유니크한 아이디를 만들어주면 좋다.

그러나 date.now()도 현재 시간을 밀리초 단위로 id를 바꿔주는 메서드이지만, 동시에 수천 명이 id를 생성하다 보면 중복되는 아이디가 생길 수도 있다.

crypto.randomUUID() 명령어나, npm install uuid를 통해서 중복되지 않은 아이디를 만들 수 있다. 크립토는 다른 브라우저에서는 호환이 안 된다든지의 에러가 있으니, npm 패키지를 이용하도록 하자.

위의 방식이 유효 id인데 아이디가 길어서 요즘에는 짧은 나노id를 만들어 사용하는 추세이다.

• 호환성이 중요하다 => 유효 id
• 성능이 중요하다 => 나노 id

단축속성명이란?

key: value가 같을 때 key만 쓰는 것.

const newTodo = {
    id: date.now(),
    title: title,
    content: content
}

// 단축속성명을 적용하면?
const newTodo = {
    id: date.now(),
    title,
    content
}

Toggling이란?

완료 <-> 취소 버튼이 있다고 했을 때 각각의 기능을 구현하는 것이 아니라,

한 버튼에서 완료를 누르면 버튼 텍스트가 취소로 바뀌면서 기능이 바뀌는, 즉 삼항 연산자가 조건문 같은 것으로 하나의 함수로 처리를 한 경우, 이를 toggle한다고 말함.

따라서 함수 이름을 지을 때도 toggled 등을 붙여 시멘틱하게 이름을 짓는 것이 좋다.

자바스크립트 객체의 key는 유일무이한 존재

자바스크립트에서 객체를 다룰 때 프로퍼티의 값이 중복되는 경우, 가장 뒤에 작성된 것으로 값을 덮어 씌워버린다.

자바스크립트에서 key는 중복을 허용하지 않고 유일무이하여야 하는 특성이 있기 때문

const obj = {
    a: 1,
    b: 2,
    c: 3,
    a: 10
};

console.log(obj); // {a:10, b:2, c:3}

함수 이름을 작명할 땐 동사로 시작

함수는 Action 즉 기능을 담당하기 때문에 titleInput 보다는 inputTitle이 더 시멘틱하고 적절하다.