01. 코드 작성법 기초

01. 이름 짓기

• 변수의 이름은 명사로 짓는다.
• 함수의 이름은 동사로 짓는다.
  • const handleClickButton = () => {}
• 모든 이름은 이름을 통해 그것이 무엇인지 유추할 수 있어야 한다.

    const  todo = [];
    (x) todo.map(todo => <li>{todo.title}</li>)
    처럼 500페이지의 소설을 같이 쓴다고 생각했을 때 남들이 유추하기 쉽게 적을 수 있도록 노력하자.

• 단수형과 복수형의 사용에 유의한다. 배열(리스트)값을 담는 변수는 복수형으로 작성한다.

  const todos = [];
  todos.map(todo => <li>{todo.title}</li>)

• bollean 값을 담는 변수명은 가능한 is로 시작하게 이름 짓는다.

02. Naming Convention

• JavaScript 파일 내에서는 다음의 이름 작성 규칙을 따른다.
  • 변수명, 함수명은 camelCase를 사용한다.
  • 상수명은 SCREAMING_SNAKE_CASE를 사용한다.
  • 클래스명, 타입명, 인터페이스명은 PascalCase를 사용한다.
• React 코드 내에서는 다음의 이름 작성 큐칙을 따른다.
  • 함수형 컴포넌트의 이름은 반드시 PascalCase를 사용한다.

번외

비교

얕은 비교 = 메모리 주소로 비교한다.
원시 타입은 값이 바뀌면 바로 인지를 하지만 참조타입에서만 메모리 주소가 바껴야만 인지를 한다.

깊은 비교 = 데이터 안의 값들을 재귀적으로 비교한다.

폴더 구조?

components 폴더 안에 각 component를 만들 때 필요한 파일들을 생성한다. => text, stories 등등
css시에 body margin=0, body,html height 100%주고 시작하장
Form.stories.jsx => 스토리북? 이게뭐지?

작업 순서?

UI를 보고 전체적인 틀을 먼저 component들을 간단하게 만들면서 생성하신다.
이 과정에서 데이터를 만들지 않은 상태라면 mock 데이터를 만들어서 예를 든다.
전체 다 바꾸기 = F2키쓰자 => 모든 파일에서 바꿔줌.
listItem도 Todo에 넣어주면 안되나요? -> Todo가 언제나 list아이템일까? 확정적이지 못하다.

그냥 머... 듣다가 아하 싶었던 부분
form으로 감싼 버튼엔 onClick을 줘도 되지만 기왕 감싼김에 바깥 form에 onSubmit 이벤트를 주자 ㅇㅇ
form 이벤트로 했을 때의 장점 걍 엔터쳐도 작동한다.
focus가 아래 유지되는데 위로 다시 보내주고싶다면? useRef

useRef = '리렌더링이 되더라도, 보존하고 싶은 값을 넣어놓는 그릇, 그릇에 넣어놓은 값이 변경되더라도, 리렌더링이 발생하지 않음.'

setter를 직접적으로 props로 전달하기보단 함수로 한번 감싸서 전달하는 것이 좋다.

const [todos, setTodos] = useState([]);
const addTodo = (newTodo) => setTodos((todos) => ({ ...todos, newTodo }));