밥줄/React

useMemo()  useState, useEffect 외에 자주 사용하는 useMemo를 학습해보자.  useMemo 훅은 Memoized value를 return 하는 훅이다.  useMomo 훅과 바로 뒤에 나올 useCallback훅을 이해하기 위해서는 먼저 Memoized value가 무엇인지 알고있어야 한다.  useMemo와 useCallback 훅에서는 memoization이라는 개념이 나오는데, 컴퓨터 분야에서 memoization은 최적화를 위해서 사용하는 개념이다.  비용이 높은, 즉 연산량이 많이 드는 함수의 호출 결과를 저장해 두었다가 같은 입력 값으로 함수를 호출하면 새로 함수를 호출하지 않고 이전에 저장해 놨던 호출 결과를 바로 반환하는 것이다.  이렇게 하면 결과적으로 함수 ..

HooksHook이란 Hook은 리액트가 처음 나왔을 때부터 있던 개념은 아니고 리액트 v16.8에서 새롭게 등장한 개념이다.리액트로 개발을 할 때 대부분 훅을 사용하기 때문에 훅에 대해 잘 이해하는 것이 중요하다.앞서 학습 글에서 리액트 컴포넌트는 두 가지 종류가 있다고 했었다.하나는 Class Component 다른 하나는 Function Component 였다.또한 컴포넌트에는 state라는 중요한 개념이 등장했었는데, 이 state를 이용해서 렌더링에 필요한 데이터를 관리했었다.클래스 컴포넌트에서는 생성자, Constructor에서 이 state를 정의하고 setState() 함수를 통해 state를 업데이트 하였다.이처럼 클래스 컴포넌트는 state와 관련된 기능뿐만 아니라 컴포넌트의 생명주기 ..

Vue3에서는 v-for를 사용하여 elements를 생성할 때 각각의 key 값을 줘야했었다.React에서도 마찬가지인 것 같다.  render() { return ( {this.state.notifications.map((notification,i) => { return ; })} ); } map을 사용했던 부분에 key를 주어 에러가 해결  render() { return ( {this.state.notifications.map((notification, i) => { return ; })} ); }  생명주기가 두번 발생하는 오류import Re..

State & Lifecycle이번 내용은 리액트 컴포넌트 종류 중 주로 Class 컴포넌트와 관련된 내용이다.물론 State라는 개념은 Function 컴포넌트에서도 사용하기 때문에 개념을 확실히 이해하고 넘어가는 것이 좋고 Lifecycle의 경우 최근에는 Class 컴포넌트를 거의 사용하지 않기 때문에 이런게 있다 정도로만 이해하고 넘어가자.특히 state는 리액트의 핵심 중의 핵심이라고 할 수 있기 때문에 완벽하게 이해가 될 때까지 반복적으로 학습을 하자.State일반적으로 영단어 state는 한글로 상태라는 뜻을 가지고 있는데, 리액트에서의 state는 리액트의 컴포넌트 상태를 의미한다.다만 상태라는 단어가 정상인지 비정상인지를 나타내는 것이라기보다 리액트 컴포넌트의 데이터라는 의미에 더 가깝다..

Component 실습 Component 합성컴포넌트 합성은 여러 개의 컴포넌트를 합쳐서 하나의 컴포넌트를 만드는 것이다.리액트에서는 컴포넌트 안에도 다른 컴포넌트를 사용할 수 있기 때문에 복잡한 화면을 여러 개의 컴포넌트로 나누어서 구현할 수 있다. // Welcome.jsximport React from "react";const Welcome = (props) => { return Hello, {props.name};};export default Welcome;// index.js...const App = (props) => { return ( );};root.render( );Welcome 컴포넌트를 사용해서 컴포넌트 합성을 하는 예제..

PropsProps의 특징Props의 중요한 특징은 read-only 즉 읽기 전용이라는 것이다.읽을 수만 있다는 것은 값을 변경할 수 없다는 말이기도 하다.props의 값은 리액트 컴포넌트가 엘리먼트를 생성하기 위해서 사용하는 값이다.그런데 이 값들이 엘리먼트를 생성하는 도중에 갑자기 바뀌어 버리면 제대로된 엘리먼트가 생성 될 수 없다.마치 붕어빵이 다 구워진 이후에 속재료를 바꿀 수 없는 것과 마찬가지다.다 구워진 이후에 속재료를 바꾸려면 붕어빵의 배를 갈라야 하는데 그렇게 하면 제대로된 상품으로 판매할 수 없을 것이다.그렇다면 다른 Props의 값으로 엘리먼트를 생성하려면 어떻게 해야 할까?그럴 때는 새로운 값을 컴포넌트에 전달하여 새로 엘리먼트를  생성하면 된다.이 과정에서 엘리먼트가 렌더링 되는..

Components컴포넌트는 React, Vue등에서 중요한 부분이다. 모든 페이지가 컴포넌트로 구성되 있고 하나의 컴포넌트는 또 다른 여러개의  조합으로 구성될 수 있다. 그리고 이러한 컴포넌트들을 마치 레고 블록을 조립하듯이 끼워 맞춰서 새로운 컴포넌트를 만들수 있는 것이다. 하나의 컴포넌트를 반복적으로 사용함으로써 전체 코드의 양을 줄일 수 있어서 자연스레 개발시간과 유지 보수 비용을 줄일 수 있다. 컴포넌트는 개념적으로는 자바스크립트의 함수와 비슷하다. 함수가 입력을 받아서 내뱉는 것처럼 리액트 컴포넌트도 입력을 받아서 정해진 출력을 내뱉는다. 그래서 컴포넌트를 그냥 하나의 함수라고 생각하면 좀 더 쉽게 개념을 이해할 수 있다. 하지만 컴포넌트의 입력과 출력은 일반적인 함수와는 조금 다르다. 리액..

JSX A syntax extension to JavaScript (자바스크립트의 확장 문법)JavaScript + XML/HTML 이라고 보면 된다.JSX를 사용하는 이유  React.createElement()를 사용할때보다 가독성, 유지보수 관점에서 유리하다injection Attacks 이라고 불리는 해킹 방법을 방어함으로써 보안성이 올라간다.인젝션 어택은 쉽게 말해서 입력창에 문자나 숫자 같은 일반적인 값이 아닌 소스 코드를 입력하여 해당 코드가 실행되도록 만드는 해킹 방법이다.예를 들어 아이디를 입력하는 입력창에 자바스크립트 코드를 넣었는데 그 코드가 그대로 실행이 되어버리면 큰 문제가 생길 수 있다.기본적으로 React DOM은 렌더링하기 전에 임베딩된 값을 모두 문자열로 변환한다. 그렇기 ..