codinghatso

useEffect의 두 가지 형태 첫 번째 컴포넌트가 렌더링 될 때마다 실행 useEffect(() => { //작업... }); 두 번째 화면에 첫 렌더링 될 때 실행 배열 인자의 값(value)이 변화할 때마다 실행 useEffect(() => { //작업... },[value]); // [] 두번째 인자가 빈 배열일 때에는 화면에 첫 렌더링 될때 만 실행한다. useEffect의 Clean Up useEffect(() => { const timer = setInterval(() => { console.log('타이머 돌아가는 중...'); }, 1000); return () => { clearInterval(timer); console.log('타이머가 종료되었습니다.'); }; }, []); 한번..

Hook이란? React 16.8에 새로 추가된 기능. Hook은 class를 작성하지 않고도 state와 다른 react의 기능들을 사용할 수 있도록 해준다. Hook은 특별한 함수이다. 예를 들어 "useState"(Hook함수)는 state를 함수 컴포넌트 안에서 사용할 수 있게 해 줍니다. 기존 에는 state를 추가하고 싶을 때 클래스 컴포넌트로 바꾸곤 했습니다. 하지만 이제 함수 컴포넌트 안에서 Hook을 이용하여 state를 사용할 수 있습니다. Hook의 규칙 최상위(at the Top Level)에서만 Hook을 호출해야 합니다. 반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하지 마세요. 이 규칙을 따르면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이..

useState는 state와 setState를 배열 형태로 return 해 줍니다. const [state, setState] = useState(초기값); state에는 현재 상태 값이 들어있습니다. setState로 상태 값을 업데이트시켜줄 수 있습니다. setState값이 변경 될 때마다 업데이트(렌더링) 됩니다. State값을 변경할 때 변경할 값이 이전 State값과 연관되어 있다면 콜백함수를 사용하는 게 좋습니다. setState((prevState) => { return newState; }) //배열 형태는 [input, ...prevState] 스프레드 문법으로 새로운 배열을 return 하면 된다. State의 초기값이 어떤 무거운 함수의 결괏값으로 전달될 때 콜백함수로 전달하면 초기..

"javascript에서 this는 함수를 호출한 객체이다" 전역에서 this 호출 시 window객체를 가리킨다. function main(){ console.log(this); } main(); //와 window.main()은 같다. //window객체를 가리킨다. 'use strict'를 사용하면 함수를 호출한 객체를 명시하지 않으면 undefined 값을 반환한다. const object = { name: 'hatso', main: function() { console.log(this); }, }; object.main(); //이렇게 하면 main함수를 호출한 object객체를 this가 가리킨다. //만약 const main2 = object.main; //main2(); //이렇게 호출한다..

일반함수의 this와 화살표 함수의 this의 차이점을 알아본다. * 메서드 : 객체의 속성으로 만들어진 함수를 의미 함수가 선언된 위치와 상관없이 호출된 객체를 가르키는 this의 특징을 다이나믹 바인딩 혹은 런타임 바인딩이라고 불림 왜냐하면 일반함수가 호출되는 런타임 시점에 결정되기 때문이다. 일반함수는 누가 호출했는지 화살표함수는 선언된 위치에 의해서 결정이 된다. 해당 위치의 this를 그대로 받아온다. 이상적인 일반함수와 화살표함수의 사용법 const object = { name: 'hatso', main: function () { setTimeout(() => { console.log(this) }, 1000); const sayName = () => { console.log(this.name..

함수 선언식 function main(){ console.log('hello'); } 호이스팅 O 익명함수 사용 X 매개변수를 명시하지 않아도 arguments 변수로 인자를 할당 O 함수 표현식 const main = function() { console.log('hello'); } main(); 호이스팅 X 익명함수 사용 O 매개변수를 명시 하지 않아도 arguments 변수로 인자를 할당 O 화살표 함수 const main = () => { console.log('hello'); } main(); 화살표 함수는 익명함수 때문에 표현식에 사용됨 매개변수를 명시해야 합니다. arguments 변수로 자동 할당 X const main = (...args) => { console.log(args); } m..

JSX Props 화살표 함수 - 일반 함수: 함수 선언식과 함수 표현식 - 화살표 함수 문법 - arguments와 가변인자 - 화살표 함수의 this Hooks - useState useEffect

테스트란? 1. 프로그램을 실행하여 오류와 결함을 검출하고 애플리케이션이 요구사항에 맞게 동작하는지 검증하는 절차 FE 테스트 특징 - UI가 존재 자동화 테스트 (Automated Test) 수동 테스트 (Manual Test) 코드로 작성, 반복적 브라우저에서 직접 접근 테스트 종류 Static Test Unit Test Integration Test E2E Test UI Test 웹 접근성 Test Cross Browser Test 너는 개발자다. 인간은 복잡하고 반복적인 일을 잘 못하는 걸 알고 있는 개발자다. 컴퓨터는 복잡하고 반복적인 일을 아주, 아주, 잘한다는 것을 알고 있는 개발자다. -by Kent C. Dodds 발표자는 테스트가 개발자들이 번거롭게 생각하는 주제이며 모두가 필요성에 대..