Facts (사실, 객관)
- 해커톤 아이디어 회의를 마치고 와이어프레임을 구상 중이다.
- 코드숨-커뮤니티에서 추천받은 테스트 주도 개발을 구매하였다 꾸준히 읽어 볼 예정.
Feelings (느낌, 주관)
- 책을 처음 받아봤는데 조금 어려운 거 같다. 천천히 읽을 생각.
- 이번 주에는 리엑트에 들어갔다. 열심히 해야지
Findings (배운 점)
let -> const
- 가능하면 let 말고 const 사용(가이드라인)
- render 위치에 직접 선언 (Object 형태로)
ex) render({count:0,}) 선언
-- function render({count})
---- render({count: count+1}); - 상태의 변경을 추적하기가 쉽다.
Eslint 함수 선언했지만 사용 X 에러
ex) 우리가 직접 사용하는 함수가 아닌 jsx에서 사용하는 함수일 경우
// eslint-disable-next-line no-unused-vars
function createElement(tagName, props, ...children) {
// 생략
}객체초기자
- 객체는 new Object(), Object.create() 또는 리터럴 표기법 (initializer 표기법)을 사용하여 초기화될 수 있습니다. 객체 초기자(object initializer)는 0개 이상인 객체 속성명 및 관련값 쌍 목록이 콤마로 분리되어 중괄호({})로 묶인 형태입니다
const object1 = { a: 'foo', b: 42, c: {} };
console.log(object1.a);
// expected output: "foo"
const a = 'foo';
const b = 42;
const c = {};
const object2 = { a: a, b: b, c: c };
console.log(object2.b);
// expected output: 42
const object3 = { a, b, c };
console.log(object3.a);
// expected output: "foo"리액트 훅
- Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다.Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는 것입니다. (하지만 이미 짜놓은 컴포넌트를 모조리 재작성하는 것은 권장하지 않습니다. 대신 새로 작성하는 컴포넌트부터는 Hook을 이용하시면 됩니다.)
import React, { useState } from 'react';
function Example() {
// "count"라는 새로운 상태 값을 정의합니다.
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}Affirmation(자기 선언)
- 대회 끝날때까지 힘내서 열심히 하자!!
