WEB/React

[React] Props (Memo, Props Types)

Intro 두 개의 같은 디자인의 버튼을 만듬 Props Memo Props Types Props 일종의 방식. 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 보낼 수 있게 해주는 방법 text가 다른 여러 button에 같은 style을 주고 싶을 때, 버튼 컴포넌트마다 style을 복사하는 건 비효율적이다. 따라서 style의 설정들을 넘겨줄 수 있는 button 컴포넌트를 하나 만들어서 재사용하는것이 좋다. button 함수형 컴포넌트를 하나만들었다. 여기에 버튼마다 다른 text를 주려면 어떻게해야할까? 바로 여기서 사용하는 것이 Props이다. 커스텀 컴포넌트에 데이터를 전달시키기 위해 구문(syntax)를 이용한다. img 태그의 src="" 라던지, button에 EventListner을 붙여..

[React] State

Intro 버튼을 몇 번 클릭했는지 세는 어플 React.js의 state 컴포넌트에 state 추가 state 변경 시 UI 리렌더링 state란? 기본으로 데이터가 저장되는 곳. 이 어플에서는 버튼을 몇 번 클릭했는지 세는 counter. 즉 바뀌는 데이터를 state로 만들 수 있다. 컴포넌트나 JSX에 변수(데이터)를 추가하고 싶을 때 바닐라 JS => ${변수}로 전달 span.innerText = `Total clicks: ${counter}`; React JS => 단순히 중괄호에 변수를 넣어준다. Total clicks: {counter} 데이터가 변경되어, 사용자에게 변화된 내용을 보여주고 싶을 때 (리렌더링) 1. render 함수를 다시 호출해 UI 업데이트 데이터가 변경될 시, re..

[React] Component, JSX

Intro 버튼을 몇 번 클릭했는지 세는 어플을 바닐라 JS와 React JS를 사용해 구현해보고 비교 Component를 만들고 화면에 렌더링하기 ( JSX ) 바닐라 JS 로 구현하기 Total clicks: 0 Clcik me document.querySeletor(selectors); 제공한 선택자와 일치하는 문서 내 첫번째 엘리먼트 반환한다. const button = document.querySelector("button"); React JS 로 구현하기 React를 사용하기 위해서 두 개의 Javascript 코드를 import 한다. react와 react-dom인데 둘의 차이는 밑에서 설명한다. 1. React JS로 Component를 생성하는 (어려운) 방법 React 규칙 하나. H..