React

ES6의 문법을 ES5로 변환해주는 역할ES6 문법을 아직 지원하지 않는 브라우저의 호환성을 위해 사용react 파일은 컴포넌트를 담당하고,react-dom 파일은 실제 DOM의 렌더링을 담당한다. \-> 실제 페이지에 jsx형태의 코드를 렌더링 할 때 사용리액트 15

컴포넌트 내부의 immutable data(변하지 않는 데이터)를 처리할 때 사용JSX 내부에 {this.props.프로퍼티이름} 으로 작성컴포넌트의 속성에서 <Component 프로퍼티이름="값" /> 로 값 전달this.props.children은 기본 pro

컴포넌트에서 유동적인 데이터를 처리할 때 사용초기값 설정이 필수 -> 생성자 내부에서 this.state = {state이름: 값} 으로 설정JSX 내부에서 {this.state.state이름} 값을 수정할 때는 setState({state이름: 값})으로 변경, co

project로 개별 평가를 하는데 뭐라도 참여하고 싶어서할줄 모르는데 그냥 할 수 있다고 해버렸다..스타일 컴포넌트는 CSS스타일을 가진 컴포넌트를 생성하는 것 같다스타일을 가진 컴포넌트를 바로 생성 -> 네이밍이 겹쳐서 혼란을 겪는 문제가 없다.className을

리액트는 맵핑 시 자바스크립트 문법을 그대로 사용할 수 있다.map() 메소드는 파라미터로 전달 된 함수를 배열의 각 요소에 처리 후, 결과를 새로운 배열로 return 한다.Arr.map(callback, \[thisArg])1\. callback: 새로운 배열의 요

Node Package Manager: 자바스크립트 패키지 관리 모듈 \- hpmjs.xom에서 node_modules 폴더에 라이브러리를 받고 package.json에 명세하여 관리해줌npx: npm에서 제공하는 실행 도구 (node.js기반 파일들의 설치와 실행을

프레임워크는 이미 짜여진 틀(frame)이 있고,그 안에 원하는 기능을 채워 넣어 프로그램을 완성한다.틀 밖으로 확장하거나 다른 프레임워크/라이브러리를 함께 사용하기 어렵다. (충돌 위험)상대적으로 무겁다 (사용하지 않는 것도 이미 구현되어 있기 때문)정해진 틀이 없어

온라인 플레이 그라운드 \-> 웹 환경에서 리액트 개발웹사이트에 react 추가 \-> 웹사이트에 부분적으로 추가 (어려움)새 react 앱 만들기 \-> toolchains 사용 (개발 도구 모음) 파일과 컴포넌트 스케일링서드파티 npm 라이브러리 사용실수를

벨로퍼트님의 리액트 네이티브를 다루는 기술 이라는 책을 보며react native 스터디를 하던중에async storage 를 다루는 예제가 나왔다useEffect 와 함께 사용하여첫 렌더링 시에는 async storage 에서 데이터를 get 해오고첫 렌더링 + 데이

@react-native-community/datetimepicker 는 딱히 react-native-modal-datetime-picker 를 안써도 꽤나 괜찮은 것 같다 쓰면 아래 모달을 쉽게 구현할 수 있다는 점이 좋음.. mode: 'date' 면 날짜 'ti

함수 컴포넌트는 React Hooks 를 사용하여 상태 관리와 라이프사이클 이벤트 처리 등을 보다 간결하게 처리할 수 있다또한 함수 컴포넌트는 순수 자바스크립트 함수로 작성되기 때문에코드가 간결하고 이해하기 쉽다간결한 문법: 화살표 함수는 function 키워드를 사용

상태를 동기적으로 업데이트 할 수 있는 기능이 생겼다물론 비동기적으로 배치처리 하는 것이 효율적일 수 있지만코드를 작성하다 보면 동기적인 상태가 필요하다flushSync 의 콜백함수에 동기적으로 업데이트할 setState 를 주면 된다

jsx 에서는 기본적으로 개행 문자나 태그 모두 문자열로 출력한다css 설정으로 개행문자(\\n) 를 사용할 수 있다

함수 컴포넌트에서 상태 관리 및 생명주기 관리 등 다양한 작업을 위해 hook 이 추가되었다함수 컴포넌트에서 핵심 개념으로 간결하게 작성할 수 있다상태를 정의하고 관리할 수 있다useState 를 사용하지 않고 변수로 데이터를 관리한다면 화면을 동적으로 관리할 수 없다

오류 경계는 클라이언트에서의 오류 처리를 위한 방법이다클라이언트에서 JavaSciprt 오류를 처리하여 애플리케이션의 다른 부분이 함께 멈추지 않도록 하는 우아한 방법이다에러로 인해 페이지가 충돌하는 것을 방지하는 것 외에도 지정된 폴백 구성 요소를 제공하고오류 정보를

https://velog.io/@hihijin/%EB%93%9C%EB%9E%98%EA%B7%B8%EC%95%A4%EB%93%9C%EB%A1%AD-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

고차 함수가 함수를 받고 함수를 반환하듯컴포넌트를 받고 컴포넌트를 반환하는 고차 함수React.memo() 가 대표적인 고차 컴포넌트다컴포넌트 자체의 로직을 재사용한다with 로 시작하는 네이밍을 하고컴포넌트 전체를 감싼다는 점에서 영향력이 크다자주 쓰면 복잡성이 증대

overflow hidden 으로 스크롤 방지unset 을 하면 상속값 혹은 초깃값을 사용한다

vite 환경 vite 빠르다 설치 npm create vite@latest . 개발 시 네이티브 ES Module 을 넘어 HMR 같은 다양한 기능을 제공한다 번들링 시 Rollup 기반의 다양한 빌드 커맨드 지원으로 최적화된 정적 리소스를 배포할 수 있게 하고

createElement 의 결과인 가상 돔 객체를실제 DOM 으로 변경하는 함수

상태는 어떤 의미를 지닌 값으로애플리케이션의 시나리오에 따라 지속적으로 변경될 수 있는 값리액트는 단순히 UI 를 만들기 위한 라이브러리로 그 이상의 기능을 제공하진 않는다순수 리액트로 전역 상태 관리를 한다면 Context API 가 있다상태 관리보다는 상태 주입이라

인터랙티브한 웹의 경우레이아웃과 리페인팅에 발생하는 비용이 크다자식 요소가 많은 경우 더욱 그렇다싱글페이지 어플리케이션의 경우에는 더더욱 비용이 커진다이러한 문제를 해결하고자 탄생한 것이 가상 DOM 이다가상 DOM 은 브라우저에서 관리하는 것이 아니라React 에서

리액트 팀이 리액트 애플리케이션의 원활한 개발을 위한 개발 도구를 만들어 제공하고 있다react-dev-tools가장 편리하게 사용하는 방법은 브라우저 확장 도구로 설치하는 것https://chromewebstore.google.com/detail/react-

리액트의 문제를 디버깅 하기 위해서 리액트 개발 도구로 충분히 가능하지만리액트 밖에서 일어나는 이슈는 확인할 수 없다브라우저 개발자 도구를 통해 이러한 문제들을 디버깅 할 수 있다HTML, CSS 등의 정보 확인을 할 수 있다DOM 에 추가되어 있는 이벤트 리스너, 접

useEffect 콜백에서 setState 를 실행 시 값만 업데이트 되고 화면에는 업데이트 되지 않는 이슈 발생\-> setState 가 동기적으로 작동하고 있어모두 실행 후 화면 렌더링되는 코드가 실행되고 있었기 때문에 발생한 이슈로 setState 를 비동기로 처

리액트 애플리케이션을 쉽게 만들기 위한 CLI 도구인create-react-app 은 지속적인 업데이트가 되지 않을 수도 있다package.json 을 직접 만들 수도 있지만npm init 을 통해 기본적인 package.json 을 만들 수 있다JSON 최상단에 $s