[내배캠] 5/16 22일차

코드 작성법 기초

이름짓기

• 변수의 이름은 명사!
• 함수의 이름은 동사! (ex. handleClickBtn)
• 모든 이름은 이름으로 유추 가능하게 해야한다!
• 단수형과 복수형 사용에 유의하자. 배열(리스트) > 복수형 작성

  const todolists = [];

Naming Convention

JavaScript

• 변수명, 함수명은 camelCase
• 상수명은 SCREAMING_SNAKE_CASE > 정해진 값들 (환경변수같은거) ex. 비밀번호 가 6을 넘어야할 때

  const PASSWORD_MIN = 6

• 클래스명, 타입명, 인터페이스 명 PascalCase

React

• 함수형 컴포넌트의 이름은 반드시 PascalCase

React

이벤트 핸들러

• 이벤트가 발생했을 때 이를 처리하도록 연결해 둔 함수를 이벤트 핸들러
• 이벤트 객체 : 이벤트에 핸들러를 연결하면 핸들러는 이벤트 객체를 인자로 받게 되어요.

state와 불변성 관리

리엑트에서 객체의 상태, 배열의 상태를 변경할 때는 항상 새로운 객체나 배열을 생성하여 상태를 업데이트 해야된다.

• 리엑트의 state는 변경여부를 감지할 때, 이전 상태와 이후 상태의 비교를 “얕은 비교”로 수행한다

와! F2키로 변수명을 바꾸면 참조하고있는 모든 코드의 변수명이 바뀜.. 신세계다 ㅠㅠ

rfce 하고 탭키 누르면 그 컴포넌트 기본 구조가알아서 나온다.. ㅠ이것도 모름.

가능하면 단계단계 절차를 명시적으로 표현하는게 좋다

예를들어 e.target.value를 넣을려고할때, 바로

setText(e.target.value) //이렇게 하기보다

const value = e.target.value //이렇게 절차적으로
setText(value)

useRef는 리렌더링되어도 보존하고 싶은 값을 넣어놓는 그릇

useState도 참조하는거 아닌가요? > useRef는 그릇의 값이 변경되더라도 리렌더링이 발생하지 않음.

focus하는거 하려면 useRef로..

오늘 과제 (이벤트 핸들러 다루기) 캐릭터 움직이기 react