React Study

a syntax extension to javascript : 자바스크립트의 문법 확장js + xml/htmlh1 태그로 둘러싸인 것을 element라는 요소로 저장xml/html → javascript로 변환변환해주는 코드createElement의 파라미터JSX를 사

레고 블록 조립하듯 컴포넌트들 모아서 개발속성들을 입력받아 react element를 생성,출력‘pure’하다 → 입력값을 변경하지 않으며, 같은 입력값에 대해서는 항상 같은 출력값을 리턴모든 리액트 컴포넌트는 그들의 props에 관해서는 pure 함수 같은 역할을 해

크롬 개발자 도구에 React Developer Tools 확장 프로그램을 추가하면 리액트에 특화된 디버깅을 할 수 있다.각 컴포넌트가 나타나는 순서라던지, 시간에 따른 props, state 확인 같은 것들을 깔끔하게 확인할 수 있다.

⚡️ State 리액트 component의 변경 가능한 데이터(상태) state는 개발자가 정한다 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 함!! state는 JavaScript 객체이다 state는 직접 수정 할 수 없다 (하면 안된다) ⚡️

❓ Hooks 이란 함수 컴포넌트에서는 state나 lifecycle method를 활용할 수 없는데, 이것을 보완해주기 위해 나온 것이 Hooks 이다. Hook = 갈고리 이미 있는 프로그램에 갈고리를 걸어 끼어들어가 함께 수행되는 것을 의미한다 Hook은 모두

DOM에서 event를 처리하는 방법과 리액트에서의 event 처리 방법은 다르다.리액트에서는 event를 처리할 때 camelCase를 사용한다.camelCase : 처음은 소문자로 시작하되, 두번째로 나오는 단어의 앞글자를 대문자로 한다. 이것이 낙타의 혹과 닮았다

조건에 따라 다른 컴포넌트를 렌더링하는 방법을 말한다.각각 true는 아니지만 true를 나타내는 것, false는 아니지만 false를 나타내는 것을 말한다.true && expression → expressionfasle && expression → falseif-

List 배열 : JavsScript의 변수나 객체들을 하나의 변수로 묶어둔 것 Key : 열쇠는 모양이 모두 다름. 각 객체나 아이템들을 구별하기 위한 고유한 문자열여러개의 컴포넌트를 하나의 화면에 렌더링하기 위해 JS 배열의 map함수를 사용한다. map 함수의 사

Shared state : state에 있는 데이터를 여러개의 하위 컴포넌트에서 공통적으로 사용하는 경우

여러개의 컴포넌트들을 합쳐 하나의 컴포넌트를 만드는 '합성'의 의미를 갖는다. 조합방법에 따라 여러가지 composition 방법이 있다.하위 컴포넌트를 포함하는 형태의 합성 방법이다. Sidebar나 Dialog 같은 Box 형태의 컴포넌트는 자신의 하위 컴포넌트를

기존의 컴포넌트의 props를 통한 데이터 전달 대신 컴포넌트 트리를 통해 곧바로 컴포넌트로 전달하는 방법을 말한다.여러번 전달해야하는 로그인 정보 같은 데이터들은 반복해서 전달하다보면 복잡해지고 코드가 지저분해지는 결과가 나타난다. 곧바로 데이터를 전달하는 conte

1️⃣ element selector기본 html 태그로 style을 지정하는 선택자2️⃣ ID selectorID로 style을 지정하는 선택자 (고유하기 때문에 하나의 요소를 지정할 때 사용)3️⃣ Class selectorclass로 style을 지정하는 선택자