개발의변화

new Promise(function(resolve, reject) { setTimeout(() => resolve(1), 1000); // (*) }) .then(function(result) { // (**) alert(result); // 1 return result * 2; }) .then(function(result) { // (***) alert(result); // 2 return result * 2; }) .then(function(result) { alert(result); // 4 return result * 2; }); 프라미스 체이닝은 result가 .then 핸들러의 체인을 통해 전달 1 1초 후 최초 프라미스가 이행 2 이후 첫번쨰 .then 핸들러가 호출 3. 2에서 반환한 값..

비동기 동작을 스케줄링 할 수 있다. setTimeout은 스케줄링에 사용되는 가장 대표적인 함수 function loadScript(src) { let script = document.createElement('script'); script.src = src; document.head.append(script); }' 콜백 자바스크립트 호스트 환경 비동기 동작을 스케줄링 한다. setTimeout은 스케줄링에 사용하는 가장 대표적인함수 콜백기반 무언가를 비동기적으로 수행하는 함수는 함수 내 동작이 모두 처리된 후 실행되어야 하는 함수가 들어갈 콜백 인수로 제공 중첩 콜백으로 하면 비동기적으로 연속적으로 수행 할 수 있지만 동작이 많은 경우에 좋지 않다. 프로미스 let promise = new Prom..

액션! 상태에 어떠한 변화가 필요 할 때 액션이라는 것을 발생 하나의 객체로 액션을 형성하고 있다! ex) { type: "TOGGLE_VALUE" } 무조건 객체 안에 type필드를 필수적으로 가지고 있어야 하고 그 외의 값들은 개발자 마음대로 넣을 수 있다. ex) { type: "ADD_TODO", data : { id: 0, text: "리덕스 배우기" } } 액션 생성함수!! 액션 생성함수는 액션을 만드는 함수, 단순히 파라미터(액션)을 받아와서 액션 객체 형태로 만들어 줌 export const changeInput = text => ({type: "CHANGE_INPUT", text }); 이러한 액션 생성함수를 만드는 이유는 나중에 컴포넌트에서 더욱 쉽게 액션을 발생시키 위해서 그래서 보통..

useState 가장 기본적인 Hook이며, 함수형 컴포넌트에서도 가변적인 상태 지님 함수형 컴포넌트에서 상태를 관리해야 한다면 이 Hook 사용 useState 기능을 사용해서 숫자 카운터를 구현 useState 함수의 파라미터에는 상태의 기본값 넣어줌 이 함수에 파라미터를 넣어서 호출하면 전달받은 파라미터로 값이 바뀌고 컴포넌트 정상적 리렌더링 useEffect 리액트 컴포넌트가 렌더링할 때마다 특정 작업을 수행하도록 설정할 수 있는 HOOK이다 클래스형 컴포넌트의 componentDidMount와 componentDidupdate를 합친형태 useEffect(()=> { console.log('렌더링이 완료되었습니다') console.log({ name, nickname }); }); 특정 값이 업..

DOM 요소에 어떤 작업 해야 할 때 css에서 특정 id에 특정 스타일을 적용하거나 해당 id를 가진 요소를 찾아서 작업할 수 있다. ref는 DOM을 꼭 직접적으로 건드릴 때 만들 수 있다. ref 사용하려면 HOOKS 사용해야 한다. 리액트에서 이런 작업은 굳이 DOM에 접근하지 않아도 state로 구현 할 수 있다. 꼭 DOM을 사용해야 하는 상황 특정 input에 포커스 주기 스크롤 박스 조작하기 Canvas 요소에 그림 그리기 ref 사용 콜백 함수를 사용하는 것 , ref를 달고자 하는 요소에 ref라는 콜백 함수로 props로 전달해 주면 된다. 이 콜백 함수는 ref 사용 arr.map(callback, [thisArg]) callback: 새로운 배열의 요소를 생성하는 함수로 파라미터는..

이벤트헨들링 주의사항 1. 이벤트 이름은 카멜 표기법으로 작성 2. 이벤트에 실행할 자바스크립트 코드 전달이 아니라 함수 형태의 값을 전달 3. DOM요소에만 이벤트를 설정할 수 있다. class EventPractice extends Component { render() { return ( 이벤트 연습 { console.log(e) } } /> ) } } 콘솔에 기록되는 e 객체는 SyntheticEvent로 웹 브라우저의 네이티브 이벤트를 감싸는 객체이다. 네이티브 이벤트와 인터페이스가 같으므로 순수 자바스크립트에서 HTML 이벤트를 다룰 때와 똑같이 사용하면 된다 SyntheticEvent는 네이티브 이벤트와 달리 이벤트가 끝나면 이벤트 초기화 하므로 참조할 수 없다 만약 비동기적으로 이벤트 객체를..

1. 클래스형 컴포넌트 자바스크립트 ES6 문법 클래스 개념이 들어오면서 클래스형 컴포넌트 사용 가능 클래스형 컴포넌트에선느 render함수가 있어야 하고 그 안에서 보여 주어야 할 JSX를 반환해야한다. 2.함수형 컴포넌트 클래스형 컴포넌트보다 선언하기가 편함, 메모리 자원도 클래스형 컴포넌트보다 덜 사용합니다. 프로젝트 완성하여 빌드한 후 배포할 때도 함수형 컴포넌트를 사용하는 것이 결과물의 파일 크기가 더 작다. 단점 : state와 라이프사이클 API의 사용이 불가능 이것은 HOOKS로 대체 가능 화살표 함수: 이 문법은 주로 함수를 파라미터로 전달할 때 유용하다 3. 모듈 내보내기 불러오기 내보내기 : export default Mycomponent; 불러오기 import React from '..

JSX는 가독성이 높고 작성하기 싶다 JSX는 html태그 뿐만 아니라 컴포넌트 안에서 작성할 수 있다. ReactDom.render 컴포넌트를 페이지에 렌더링하는 역할, react-dom 모듈을 불러와 사용가능 첫 번째 파라미터에는 페이지에 렌더링할 내용으 JSX 형태로 작성, 두 번째 파라미터에는 해당 JSX 렌더링할 document 내부 요소를 설정 React.StrictMode 리액트 프로젝트에서 레거시 기능들을 사용하지 못하게 하는 기능 JSX특징 1. 감싸인 요소 = 컴포넌트 여러 요소가 반드시 하나의 요소로 감싸줘야 한다. function App() { return ( 리액트 안녕 리액트 작동 ); } 왜 하나의 요소로 묶어야 하나면 virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효..