늘 겸손하게

Props props는 읽기 전용 함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트 자체 props를 수정해서는 안됩니다. 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다. 순수 함수 동일한 입력값에 대해 항상 동일한 결과를 반환하는 함수 외부 상태를 변경하거나 영향을 받지 않는 함수 한마디로, 부수효과가 없고 같은 입력에 대해 같은 출력을 반환하는 함수입니다. 부수효과 ( side effect ) 함수 외부 변수 혹은 상태값 변경 함수로 들어온 인자값 변경 console.log XHR/fetch call 예로 1 2 3 function sum(a, b) { return a + b; } cs 위의 sum 함수는 순수 함수입니다. 반면에 다음 함수는 자신의 입력값을..

서론 React 컴포넌트를 선언하는 방식은 두 가지가 있다. 하나는 클래스형 컴포넌트, 다른 하나는 함수형 컴포넌트이다. 두 가지 방식의 차이를 알아보자 목차 선언 방식 차이 state 선언, 사용 차이 Props 호출 차이 1. 선언 방식 차이 클래스 컴포넌트 컴포넌트 시작에 class 키워드 필요 React.Component 상속 render() 메소드 필요 함수형 컴포넌트 return문 내부에서 JSX 작성 비교 2. state 선언, 사용 방식 클래스형 - 선언 방식 constructor 내부에서 this.state를 통해 1 2 3 4 5 6 7 8 9 10 11 class Sample extends Component { constructor(props) { super(props); this...

Promise와 async, await 구문 모두 자바스크립트에서 비동기 처리를 위해 사용됩니다. Promise와 async, await을 비교해 봅시다. Promise 프로미스는 3가지 상태(state)가 존재합니다. Pending : 이벤트 발생 전 초기 상태 Resolved : 비동기 처리가 정상적으로 완료된 상태 Rejected : 비동기 처리 중 오류 발생 혹은 실패 각각의 상태에 따라 필요한 작업을 코딩할 수 있습니다. Promise의 에러 처리 (핸들링 ) 성공적으로 처리된 비동기 작업은 resolved promise라 부를 수 있고. then() 메서드로 처리 실패하거나 오류가 발생한 비동기 작업은 rejected promise이고. catch() 처리 비동기 처리 이후에 실행할 코드는. ..

async, await? async, await은 자바스크립트 비동기 처리를 위한 키워드. 기존의 비동기 처리 방식인 콜백 함수, Promise의 단점인 좋지 않은 가독성을 보완한 가장 최근에 나온 자바스크립트 비동기 처리방식 async, await으로 개발자는 비동기 처리를 가독성 좋은 코드로 해결할 수 있습니다. async async는 함수 앞에 위치합니다 async function f() { return 1; } 함수 앞에 async를 붙이면 해당 함수는 promise를 반환합니다. promise가 아닌 값을 반환하더라도 resolved promise 형태로 promise가 반환되도록 합니다. await await 문법은 async 함수 안에서 동작하며 await은 promise가 처리될 때까지 기..