React공부

JavaScript + XMLJavaScript 코드 내 HTML 작성실행 전 바벨을 통해 자바스크립트로 변환됨class가 아닌 className 사용변수를 HTML에 사용할 때 중괄호{} 사용스타일 지정은style={{key:value, key:value, ... }

root div에 리액트 엘리먼트 랜더링ReactDOM.render함수 => 첫번째 파라미터인 reactelement를 두번째 파라미터인 DOMElement에 랜더링 하는 역할을 한다//reactElement -> react의 가상DOM에 존재//DOMElement -

입력 : Props 출력 : React element >#### props 리액트 컴포넌트의 속성 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체 >#### props의 특징 읽기 전용 모든 리액트 컴포넌트는 프롭스를 직접 바꿀 수 없고, 같은 프롭

여러개의 컴포넌트를 합쳐서 하나의 컴포넌트로 만드는 것컴포넌트 안에 다른 컴포넌트를 사용할 수 있음복잡한 컴포넌트를 쪼개서 여러 개의 컴포넌트로 나누는 것

리액트 컴포넌트의 변경 가능한 데이터사전에 미리 정의된 것이 아닌 개발자가 직접 정의해서 사용렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야함（state가 변경될 경우 컴포넌트가 재렌더링 되기 때문 -> 성능 저하)javascript 객체construct

네이밍 규칙 : use[...] count를 변수로 선언해서 사용하면 버튼 클릭 시 count의 값은 증가하지만 재렌더링이 일어나지 않아 화면에 표시되지 않는다 state를 사용해 값이 바뀔 때마다 재렌더링 해줘야함 >### useState() 사용법 사용 예

반복문, 조건문, 중첩된 함수 안에서 Hook을 호출하면 안됨Hook은 컴포넌트가 렌더링될 때마다 매번 같은 순서로 호출되어야 한다.name의 값이 빈 문자열이 되면 조건문의 값이 flase가 되어 useEffectHook이 호출되지 않음Hook의 규칙을 따르도록 강제

이름이 use로 시작하고 내부에서 다른 Hook을 호출하는 하나의 자바 스크립트 함수useState와 useEffect를 사용하는 부분이 동일여러 개의 컴포넌트에서 하나의 Custom Hook을 사용할 때 컴포넌트 내부에 있는 모든 state와 effects는 전부 분

\*Arguments = 함수(EventHandler)에 전달할 데이터

어떠한 조건에 따라서 렌더링이 달라지는 것greeting 컴포넌트에서 isLoggedIn이 ture이면 UserGreeting을 returnisLoggedIn이 false이면 GuestGreeting을 returntruty : ture는 아니지만 true로 여겨지는 값

numbers배열에 들어있는 각 숫자에 2를 곱한 값이 들어간 doubled라는 배열을 생성하는 코드map함수는 배열의 첫번째 아이템부터 순서대로 각 아이템에 연산을 수행한 뒤 그 결과를 배열로 만들어서 return한다.리액트에서 맵함수를 사용하여 엘리먼트를 렌더링하는

사용자로부터 입력을 받기 위해 사용엘리먼트 내부에 각각의 state가 존재사용자가 입력한 값에 접근하고 관리하기 어려움사용자가 입력한 값에 접근하고 제어할 수 있도록 해주는 컴포넌트리액트의 통제를 받음HTML textareaReactHTML select 태그React디

하나의 데이터를 여러 개의 컴포넌트에서 표현해야 하는 경우 가장 가까운 공통된 부모 컴포넌트의 state를 공유해서 사용하는 것이 효율적하위 컴포넌트가 공통된 부모 컴포넌트의 state를 공유하여 사용하는 것

여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것여러개의 컴포넌트를 어떻게 조합할 것인가를 생각하는게 중요Containment, Specialization하위 컴포넌트를 포함하는 합성 방법Sidebar나 Diglog같은 box형태의 컴포넌트는 자신의 하위 컴포넌

데이터를 필요로 하는 컴포넌트에 바로 전달할 수 있음코드가 깔끔해지고 데이터를 한 곳에서 관리하기 때문에 디버깅에도 유리실제 데이터를 필요로하는 컴포넌트의 깊이가 깊어질수록 복잡해짐반복되는 코드를 계속 작성해줘야 하기 때문에 비효율, 비직관적여러 컴포넌트에서 접근이 일

CSS문법을 그대로 사용하면서 결과물을 스타일링된 컴포넌트 형태로 만들어주는 오픈소스 라이브러리Styled컴포넌트는 tagged 템플릿 리터럴을 사용하여 css속성이 적용된 리액트 컴포넌트를 만듦

jshtml