React

선언형 프로그래밍컴포넌트 시스템크로스 플랫폼리액트는 js로 html을 생성하기 때문에 JavaScript가 활성화 상태여햐 함비활성화이면 noscript에 작성한 내용이 화면에 나옴js 비활성화js 활성화jsdocument.createElement()는 DOM에서 새로

원하는 내용을 담은 html 코드를 태그 하나로 축약할 수 있음스타일을 넣으면 오염됨스타일을 shadow DOM에 넣으면 됨slot은 웹 컴포넌트에서 특별한 역할을 하는 태그부모 컴포넌트에서 자식 컴포넌트로 콘텐츠를 전달하는 데 사용: JSX에 데이터를 끼워 넣으려면

사용자 인터페이스 구축을 위한 JavaScript 라이브러리대표적인 컨셉선언형 프로그래밍단방향 데이터 바인딩XML과 유사한 문법 (JSX)React 가상 요소를 효율적으로 재사용 하기 위한 컴포넌트 제공React 컴포넌트는 마크업을 생성생성된 마크업은 조립 → 가상 D

잠재적인 문제를 감지하고 경고를 발생시켜 개발자에게 알려주는 도구StrictMode 태그를 사용하면 엄격 모드가 활성화2번씩 실행console.log('apple')을 작성하면 개발자 도구 콘솔창에 apple이 2번 출력된다.속성값을 전달받아 재사용 가능항상 JSX를

리액트 <React.Fragment>웹 표준 <template>리액트는 하나의 태그가 나머지를 감쌈그래서 아래와 같은 코드는 문법 오류배열로 감싸기 (가능)리액트 플래그먼트 사용 (권장)map: 값을 반환하기 때문filter: 원본 배열을 파괴하지 않고 새로

styled-components (CSS-in-JS 라이브러리)emotion (CSS-in-JS 라이브러리)스타일을 변수에 넣고 해당 컴포넌트에 바인딩.module.csscss파일을 모듈화 시켜줌스타일이 다른 css파일로 오염되지 않음||는 첫번째 Truthy 값을 반

부모 컴포넌트에서 props를 보내고 자식이 받을 때 Rest 파라미터를 사용하면 지정하지 않은 props를 모두 받을 수 있다.기본 스타일을 먼저 적고 후에 커스텀 스타일을 작성해야 함객체는 같은 key값을 가지고 있다면 후에 작성된 값이 덮어쓰기하기 때문React는

새로운 변수 객체를 만들고변수변경함수를 사용이때, 기존 값과 새로운 값에 각각 spread syntax를 사용

부모 컴포넌트는 자식에게 props(속성)를 전달할 수 있고자식은 부모에게 props를 받아 상태를 표현할 수 있다.하지만, 자식은 props를 변경할 수 없다.또한, 형제끼리도 props를 주고 받을 수 없다.상태를 상위(부모)로 올리면 된다. (Lifting sta

전에 배운 것과 오늘 배운 것이 섞여 있습니다.주어진 처리만 진행동일 입력, 동일 출력함수 범위 밖의 변수나 호출 전에 생성된 객체를 변경 X하지만, 렌더링 되는 동안 방금 만든 변수와 객체를 변경 O렌더링 하는 동안이 아닌 외부에서 발생하는 부수적인 일들ex) 화면

ref 객체를 반환ref 객체에는 current 속성이 있고 거기에 저장됨ref 값은 컴포넌트 전생애 주기 동안 유지즉, 재렌더링이 되어도 언마운트 전까지 이전 값을 그대로 유지 가능저장공간state는 변하면 재렌더링된다. 그럼 컴포넌트 내부 변수들 초기화됨 (컴포넌트