React 공부중

<벨로퍼트 님의 리액트 입문 부분 참고하여 공부 중입니다>https://codesandbox.io/s/3-baeyeolsagjebeoteunmandeulgi-forked-lg06u?file=/src/CreateUser.js:0-451App.js, User

이름 클릭 시 이름의 색이 회색으로 변함users state에는 active라는 속성 추가state 불변성에는 영향을 주지않으면서 배열 업데이트 하기 위해서는 MAP 사용.

전에도 useEffect 부분에서 너무 어려워서 하다가 도망갔었는데 다시 돌아왔다.마운트, 언마운트 개념보다 좀 더 쉽게 이해해보기 위해서는, useEffect는 사이드이펙트의 동작을 관리한다고 보면 됨.즉, 외부 API를 요청한다거나, 라이브러리를 사용한다거나, se

사실 내장함수는 잘 모른다map에 대해 좀 더 자세히 적어놓고 나중에 더 좋은 내용 있으면 추가하는 식으로 해야겠다. 파라미터로 전달된 함수를 이용해 배열 각 요소를 원하는 규칙에 따라 변환해 새로운 배열을 생성하는 것.currentValue : 현재 배열 내의 값in

자바스크립트 라이브러리로 사용자 인터페이스를 만드는데 사용함.오직 View만 신경쓰는 라이브러리리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체재사용 가능한 API로 수많은 기능들을 내장하고 있음컴포넌트 하나에서 해당 컴포넌트의 작동방식, 생김새 정의사용자

자바스크립트 확장문법like XML작성한 코드는 브라우저에서 실행 전 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 코드로 변형됨컴포넌트에 여러 요소가 있다면 반드시 부모 요소로 감싸야 함Virtual DOM에서 컴포넌트의 변화 감지 시 효율적으로 비교하

properties, 컴포넌트의 속성임부모 컴포넌트에서 설정 가능함부모 컴포넌트(App)가 있다는 전제임.props 렌더링 시 {}로 감싸줘서 사용하면 됨컴포넌트 태그 사이의 내용을 해당 컴포넌트에서 보여주기 위해서는 children을 사용해야 함출력 : childre

컴포넌트 내부에서 바뀔 수 있는 값컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값컴포넌트는 props를 읽기 전용으로만 사용가능함객체 비구조화 할당과 비슷함배열 값을 쉽게 사용 가능Say.jsApp.jsuseState 호출 시 배열 반환첫 번째 요소 : 현재

Say.js이벤트 이름은 카멜표기이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아닌 함수 형태의 값 전달DOM 요소에만 이벤트 설정 가능우리가 만든 컴포넌트에는 이벤트 설정 불가능함.div, span, input, button 등에만 이벤트 설정 가능함.이름이 on

파라미터로 전달된 함수를 사용하여 배열 내 각 요소를 원하는 규칙에 따라 변환 후 그 결과로 새로운 배열 생성callback : 새로운 배열의 요소를 생성하는 함수, 파라미터는 3개\-currentValue : 현재 처리하고 있는 요소 \-index : 현재 처리하고

리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행할 수 있게 함componentDidMount, componentDidUpdate 합친 형태임2번째 인자에 빈 배열 : 컴포넌트가 맨 처음 화면에 등장할 때만 실행하고 업데이트할 때는 실행하지 않기 위함검사하고 싶은 값

useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해주고 싶을 때 사용reducer : 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션(action) 값을 전달받아 새로운 상태를 반환하는 함수새로운 상태를 만들 때는 반드

함수형 컴포넌트 내부에서 일어나는 연산 최적화 가능렌더링 과정에서 특정 값이 바뀌었을 때만 연산을 실행, 바뀌지 않았다면 이전 결과 재탕함이 경우 숫자를 등록할 때뿐만 아니라 input의 값이 변경되어도(리렌더링) getAverage함수가 실행되면서 낭비됨.첫 번째 파

렌더링 성능 최적화 시 사용useMemo와 비슷함이전 예제에서 onChange, onInsert 함수의 경우, 컴포넌트가 리렌더링될 때마다 새로 생성됨첫 번째 파라미터 : 생성하고자 하는 함수두 번째 파라미터 : 배열 - 어떤 값이 바뀔 때 함수를 실행할지에 대한 배열

특정 DOM 선택할 때 사용특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 포커스를 설정해줘야된다던지 등 정말 다양한 상황이 있겠죠. 추가적으로 Video.js, JWPlayer 같은 HTML5 Video 관련 라이브러리,

앞전에 만든 todoList의 경우, 리스트 항목이 많아지게 될 경우 리렌더링 시 너무 많은 시간 소요함수형 컴포넌트의 경우, 라이프사이클 메서드 사용이 불가능함컴포넌트 props가 변하지 않았다면 리렌더링하지 않음컴포넌트에서 리렌더링이 필요한 상황에서만 리렌더링함받아

single page application : 한 개의 페이지로 이루어진 애플리케이션뷰 렌더링 : 사용자 브라우저에서 담당애플리케이션을 브라우저에 불러와서 실행시킨 후, 사용자와의 인터랙션 발생 시 필요한 부분만 자바스크립트 이용하여 업데이트해줌새로운 데이터 필요 시

1. 비동기 작업의 이해 1.1. 콜백 함수 setTimeout의 인자로 넘겨준 함수 = 콜백함수 콜백지옥 1.2. 프로미스 resolve : 성공, reject : 실패 .then을 통해 그 다음 작업을 설정 1.3. async/await 2.axios로

map 함수 사용 전, articles의 값이 null인지 반드시 확인하지 않으면 에러발생useEffect에서 \[]를 통해 newsAPI는 한 번만 불러오게 함.useEffect의 콜백함수에 async를 붙이면 리턴되는 뒷정리함수에 걸리기 때문에 사용하는 내부함수에서

전역적으로 사용할 API 있을 경우 유용하게 사용 : 사용자 로그인 정보, 애플리케이션 환경설정, 테마 등예 : 리덕스, 리액트 라우터, styled-component상태 뿐 아니라 함수, DOM도 전역적으로 관리할 수 있음react component 안에서 globa

상태에 어떤 변화 필요 시 액션 발생 하나의 객체로 표현됨애플리케이션 > 스토어 로 보내는 데이터 묶음action 객체는 type 필드를 가지고 있어야 함type: 어떤 형태의 액션이 실행될지 결정함type 필드 외에는 마음대로 넣을 수 있음 : 추후 상태 업데이트 시

바닐라 자바스크립트 이용UI 관리하는 라이브러리를 이용하지 않기 때문에 DOM 직접 가리키는 값 선언해줌.index.htmlstyles.cssindex.js액션 이름 : 문자열, 대문자, 유일하게 존재액션 이름을 사용하여 액션 객체를 만드는 액션 생성함수를 만들었음.r

상태 관리를 컴포넌트 외부에서 할 수 있다프로젝트의 상태에 관한 데이터들스토어 구독 시에 스토어에 특정 함수가 전달되고, 스토어의 상태값이 변동되면 이 함수를 통해 알려줌(리스너)컴포넌트에 이벤트가 생겨서 상태를 변경해야할 일이 생겼을 때, Dispatch(action

1. UI 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트 분리 프레젠테이셔널 컴포넌트 : 그저 props만 받아와서 UI만 보여줌 컨테이너 컴포넌트 : 리덕스와 연동되어 있는 컴포넌트. 리덕스로부터 상태를 받아오거나 스토어에 액션을 디스패치하기도 함. 프레젠테이셔널 컴포

1. redux-action 1.1. counter 모듈에 적용하기 modules/counter > createAction : 액션생성 함수를 더 짧게 정의가능 매번 객체를 만들어줄 필요 없이 더욱 간단하게 액션 생성함수를 정의 > handleActions :