리액트

자바스크립트 오픈소스 라이브러리render 함수는 html형식의 문자열이 아닌 뷰가 어떻게 작동하는지에 대한 정보가 담긴 객체를 반환합니다리액트에서 뷰를 업데이트할때 조화 과정을 거친다 라고 표현하는 것이 정확합니다이전 render()함수 반환 정보와 현재 render

JSX는 JavaScript XML의 줄임말로 문자열도 아니고 HTML도 아닙니다자바스크립트를 확장한 문법으로 자바스크립트 객체라고 볼 수 있습니다JSX를 사용함으로써 구조와 기능을 한눈에 확인 할 수 있습니다JSX로 작성된 코드는 Babel을 통해 JavaScript

state 및 라이프사이클 기능 사용 가능render() 함수 사용적은 메모리자원 사용 => 빌드된 파일 용량 작음 state 및 라이프사이클 기능 사용 불가 => v16.8 이후 Hooks 기능 도입으로 가능화살표 함수 사용 가능 (ES6)

pros는 properties 줄인 표현으로 컴포넌트의 속성을 설정할 때 사용하는 요소입니다부모컴포넌트자식컴포넌트만약 prop의 기본값을 정해주고 싶다면 defautProps 프로퍼티로 설정을 해주면 됩니다부모컴포넌트자식컴포넌트부모컴포넌트자식컴포넌트props의 타입을

state란 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다setState의 두번째 파라미터에 callback함수를 넣을 수 있습니다v16.8 이후 useState 라는 함수를 통해 함수형 컴포넌트에서도 state를 사용 할 수 있습니다useState() 함수의 인자

this 바인딩화살표 함수여러개의 input 데이터여러개의 input 데이터이벤트 이름은 camelCase 표기법으로 작성이벤트를 전달할 때는 함수 형태의 객체를 전달이벤트는 DOM요소에만 적용 가능ClipboardCompositionKeyboardFocusFormMo

DOM을 꼭 직접적으로 건드려야 할 때특정 input에 focus 주기스크롤 박스 조작하기Canvas 요소에 그림그리기Hook 함수의 useRef 메서드를 사용하여 Reaact.createRef 와 유사

arr.map(callback, thisArg)callback(crreuntValue\[, index\[, array]]) - 새로운 배열의 요소를 생성하는 함수currentValue : 현재 처리하고 있는 요소index : 현재 처리하고 있는 요소의 인덱스 값 (op

클래스형 컴포넌트 라이프 사이클 마운트 constructor 컴포넌트를 새로 만들 때마다 호출되는 생성자 클래스 getDerivedStateFromProps props에 있는 값을 state 넣을 때 사용 render 컴포넌트를 렌더링하는 메서드 compone

const value, setValue = useState(0);함수 파라미터 - 기본값배열 첫번째 요소 - 상태값배열 두번째 요소 - 상태를 설정하는 함수리액트 컴포넌트가 랜더링될때마다 특정 작업을 수행하는 Hook마운트될 때만 실행 (처음 렌더링될때만 실행)특정 값

일반 CSSSASS / SCSSCSS Modulestyled-componentsCSS 전처리기로 복잡한 작업을 쉽게 할 수 있게 해주고, 스타일 코드의 재활용성을 높여줄 뿐만 아니라 코드의 가독서응ㄹ 높여서 유지 보수를 더욱 쉽게 해줍니다sassutil 함수 분리프로젝

리덕스는 React 에서 가장 많이 사용되고 있는 상태관리 라이브러리 중 하나다자바스크립트 라이브러리기 때문에 리액트 뿐만이 아니라 다른 언어에서도 사용 가능하다스토어라는 하나의 저장소에서 데이터를 가져온다state를 직접 변경하지 않고 action 객체를 통해 상태를