이롭게 현명하게

[var과 let 간의 차이가 발생하는 이유]자바스크립트 엔진은 코드를 실행하기 전에 변수 선언문, 함수선언문 등을 찾아 위로 끌어올리는 평가 과정을 거친다.이 과정에는 선언 단계와 초기화 단계가 있다.선언 단계를 통해서 스코프에 변수 식별자를 등록해 자바스크립트 엔진에 해당 변수의 존대를 알리고 초기화 단계에서 undefined라고 스코프에 등록된 변수 식별자에 값을 초기화하는 단계를 거친다.  선언 단계 : 자바스크립트 엔진에 존재를 알리기스코프에 변수 식별자를 등록해 자바스크립트 엔진에 해당 변수의 존재를 알린다.초기화 단계 : undefined로 초기화하기초기화 단계에서 undefined라고 스코프에 등록된 변수 식별자에 값을 초기화한다. 그런데 var는 이 과정을 코드 평가 과정에서 모두 이루어..

목차 EmailJS란?EmailJS 사용법참고사항 [EmailJS란?]개인 웹 포트폴리오나 회사 사이트에서 사용자가 문의사항을 남기는 이메일 폼 양식을 본 적이 있다. 이 폼을 보고 내 웹 포트폴리오에 적용하면 좋을 거 같다는 생각이 들었다.Contact 페이지에 적용시키기 위해서는 EmailJS를 사용하면 된다.EmailJS는 javascriptAPI를 사용해 웹에서 메일을 바로 전송할 수 있도록 지원한다.EmailJS를 사용하면 내 이메일 주소는 공개하지 않으면서 내 포트폴리오에 접속한 사람으로부터 메일을 받을 수 있는 기능이다.*  githubPage는 정적 페이지만 지원한다. 데이터베이스 등을 활용하여 백엔드에서 메일을 보낼 수 없다.그렇기 때문에 githubPage에서 사용하기 충분하다. 월별 ..

목차 useReducer useReducer와 useState import [useReducer] 리액트에서 컴포넌트의 상태 관리를 위해 기본적으로 가장 많이 사용하는 Hook은 state이다. 공식 문서에서 언급된 것처럼 useReducer는 상태(state)를 관리하고 업데이트하는 useState를 대체할 수 있는 Hook이다. useState와 다르게 useReducer는 한 컴포넌트 내에서 상태(state)를 업데이트하는 로직 부분을 그 컴포넌트로부터 분리되는 것을 가능하게 함으로써 코드의 최적화를 이루게 해 준다. 좀 더 복잡한 상태관리가 필요한 경우 useReducer를 사용할 수 있다. useReducer는 이전 상태와 action을 합쳐 새로운 state를 만드는 조작을 말한다. 콜백 대신..

목차 React.memo? 구조 [React.memo?] React.memo는 고차 컴포넌트(HOC : High Order Component)이다. 컴포넌트가 동일한 props로 동일한 결과를 렌더링한다면 React.memo를 호출하고 결과를 메모이징(Memoizing) 하도록 래핑하여 경우에 따라 성능 향상을 누릴 수 있다. 즉 React는 컴포넌트를 렌더링 하지 않고 마지막으로 렌더링된 결과를 재사용한다. React.memo는 props 변화에만 영향을 준다. 필요한 상황에서만 리렌더링을 하도록 설정한다. 컴포넌트의 props 가 바뀌지 않았다면 리렌더링을 방지한다. props가 복잡한 객체인 경우 React.memo는 얕은 비교만 한다. 상태 관리 시 함수형 업데이트를 하면 최신 상태를 참조하기 때..

목차 useCallback이란? import 예시 코드 정리 [useCallback이란?] useCallback은 useMemo와 비슷하다. useMemo : 특정 결괏값을 재사용할 때 사용 useCallback : 특정 함수를 새로 만들지 않고 새로 사용 useCallback을 사용하지 않는 함수들은 컴포넌트가 리렌더링 될 때마다 새로 만들어진다. 함수를 새로 만드는 것은 메모리, cpu가 리소스를 많이 차지하지는 것은 아니다. 함수를 새로 선언한다고 해서 그 자체만으로 큰 부하가 생기지 않는다. 한번 만든 함수를 재사용할 수 있을 때 재사용하는 것이 좋다. 나중에 컴포넌트들이 props가 바뀌지 않는다면 Virtual DOM에 리렌더링 조차 안 하게 할 수 있다. 만약 props가 바뀌지 않았다면 V..

목차 State란? Lifecycle이란? 예시코드 [State란?] state는 상태라는 뜻을 가지고 있다. 리액트에서의 state는 리액트 Component의 상태를 의미한다. 상태라는 단어가 정상, 비정상을 나타내는 것이라기보다 리액트 Component의 데이터라는 의미가 더 가깝다. 리액트에서의 State : React Component의 변경 가능한 데이터 이 state는 사전에 미리 정해진 것이 아니라 React Component를 개발하는 각 개발자가 직접 정의해서 사용한다. 자바스크립트에서는 변수를 사용한다. 리액트에서는 상태(state)를 사용한다고 생각하면 이해하기 쉽다. State를 정의할 때 중요한 점은 꼭 렌더링이나. 데이터 흐름에 사용되는 것만 state에 사용해야 한다. Sta..