React

JavaScript를 사용하여 HTML 로 구성한 UI 를 제어하기 위해서는 브라우저의 DOM API 를 사용해서 특정 DOM 을 선택한뒤, 특정 이벤트가 발생하면 변화를 주도록 설정해야 한다.이 경우, id를 사용해 각 DOM을 선택한 후, 원하는 이벤트 발생 시

const element = <h1>Hello, world!</h1>;const element = <h1>Hello, world!</h1>;JSX는 React “엘리먼트(element)” 를 생성한다.babel 이 JSX 를 JavaScript 로

Dom Element는 HTML 요소를 의미한다.Dom Element = 실제 브라우저 DOM에 존재하는 ElementReact Element = 가상 DOM에 존재하는 Elementconst element = <h1> Hello, world </h1>;\-

Function Component모든 리액트 컴포넌트는 Pure 함수같은 역할을 해야한다. 즉 리액트 컴포넌트는 일종의 함수라고 생각해야 한다.Welcome 함수는 props를 받아 element를 리턴하기 때문에, React Component이며 함수 Componen

= React Component의 State = React Component의 DataState는 개발자가 정의한다.State를 정의할 때에는, 렌더링이나 데이터 흐름에 사용되는 값만 State에 포함시켜야 한다.State는 Javascript 객체이다.모든 클래스 컴

클래스 컴포넌트는 생성자에서 state를 정의하며, setState 함수를 통해 state를 업데이트한다. 생명주기 함수들도 제공된다.BUT ❗ 함수 컴포넌트는 state를 정의하여 사용할 수 없으며 생명주기에 따른 기능을 구현하지 못하기에, "Hook이라는 기능"이

우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props 를 사용한다.App 컴포넌트에서 Hello 컴포넌트를 사용 할 때 name 이라는 값을 전달해주고 싶다면,컴포넌트에게 전달되는 props 라는 파라미터를 통하여 조회 할 수 있다. props 는 객체 형태로

function App() { return ( )}export default App;// Hello.jsimport React from 'react';function Hello({ color, name, isSpecial })

이벤트에 등록하는 함수에서는 이벤트 객체 e 를 파라미터로 받아와서 사용이 객체의 e.target 은 이벤트가 발생한 DOM 인 input DOM 을 가리킨다.이 DOM 의 value 값, 즉 e.target.value 를 조회하면 현재 input 에 입력한 값이 무엇

리액트를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 발생한다.\-> 리액트에서 ref 라는 것을 사용 \-> 함수형 컴포넌트에서 ref 를 사용 할 때에는 useRef 라는 Hook 함수를 사용useRef() 를 사용하여 Ref 객체를 만들고,

map() 함수는 배열안에 있는 각 원소를 변환하여 새로운 배열을 만들어준다.리액트에서 배열을 렌더링 할 때에는 key 라는 props 를 설정해야 한다. key 값은 각 원소들마다 가지고 있는 고유값으로 설정을 해야 한다.출처 : https://react.v

멀티 페이지 애플리케이션에서는 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고, 페이지를 로딩할 때마다 서버에서 CSS, JS, 이미지 파일 등의 리소스를 전달받아 브라우저 화면에 보여 주었다. BUT ❗ 사용자 인터랙션이 많고 다양한 정보를 제공하는

페이지 주소를 정의할 때 유동적인 값을 사용해야 할 때도 있다.URL 파라미터 예시: /profile/velopert쿼리스트링 예시: /articles?\*\*page=1&keyword=reactURL 파라미터는 주소의 경로에 유동적인 값을 넣는 형태고, 쿼리 스트링은