코딩하는라민

[React] state 컴포넌트가 데이터를 다루는 방법으로는 props 를 이용한 방법, state 를 이용한 방법, contet 를 이용한 방법이 있다. 📌 state 란? 클래스형 컴포넌트에서는 state를 통해서 기억할 수 있는 임의의 데이터를 관리할 수 있다. 하지만 함수형 컴포넌트에서는 그렇게 하지 못한다. 그대신 함수에서는 React Hooks 이라는 것을 제공해 state 를 관리할 수 있다. 📌 state 는 언제 사용하는가? 컴포넌트가 정보를 계속 추적 해야하는 경우, state를 생성하거나 업데이트하고, 사용할 수 있다. 📌 props 와의 차이 값이 변경되면 새로운 return 값을 만들어서 UI를 바꿔준다. 컴포넌트에 prop 을 입력하면 컴포넌트 함수가 처리해서 return 값을..

[React] 이벤트 처리하기 📌 이벤트 처리하기 DOM 엘리먼트에서 이벤트를 처리하는 방식과 유사하다. ✅ 이벤트명은 카멜 케이스를 사용 이벤트 핸들러는 문자열이 아닌 함수로 전달한다. Hello React ✅ false 를 반환해도 기본 동작을 방지할 수 없다. welcome to my blog 따라서 이벤트의 기본 동작을 방지하기 위해 preventDefault 를 사용해야한다. function hello(e){ e.preventDefault(); alert('Hello'); } welcome to my blog ✅ 엘리먼트가 생성된 후에는 addEventListener를 호출할 필요가 없다. 엘리먼트가 처음 렌더링될 때 addEventListener를 제공하면 된다. 📌 클래스 컴포넌트 사용 시,..

[React] 컴포넌트(Component)와 Props 📌 컴포넌트 앱을 이루는 최소한의 단위를 말한다. 기존의 HTML 문서는 반복적인 부분을 단순히 하드코딩하여 재사용이 불가능했지만, 리액트에서는 컴포넌트를 통해 UI를 `재사용 가능`한 `조각`으로 나눠서 각각 관리할 수 있다. 📌 함수 컴포넌트 function Cafe(props){ return latte } props를 인자로 받아 react 엘리먼트를 반환한다. 최근에 함수형 컴포넌트를 많이 사용한다. 클래스 컴포넌트보다 간결하다. 📌 클래스 컴포넌트 ES6 class 를 사용하여 컴포넌트를 정의할 수도 있다. class Cafe extends React.Component { render(){ return latte } } 함수 컴포넌트보다 더..

[React] JSX 이해하기 📌 사용자 정의 컴포넌트 ✅ Import 상단에 다른 곳에 정의된 코드를 불러와 현재 문서에서도 사용할 수 있게 해준다. 리액트 라이브러리 불러오기 import React from 'react'; JSX 를 사용하기 위해서는 React 라이브러리를 파일로 불러와야한다. 단, cdn 으로 스크립트 태그를 넣었다면 React 는 전역변수이기 때문에 별도로 불러올 필요가 없다. CSS 파일 불러오기 import './style.css'; 이미지 불러오기 import logo from './logo.svg'; ✅ 렌더링 // HTML 파일 이 안에 들어가는 모든 요소를 ReactDOM에서 관리한다. React 에서는 일반적으로 하나의 루트 DOM 노드가 있다. 렌더링하기 위해서는 ..

[React] 리액트(React) 시작하기 / JSX와 create-react-app 📌 리액트란? 사용자 인터페이스를 만들기 위한 라이브러리이다. 다른 라이브러리들과 함께 특정 환경을 렌더링하는데 사용한다. → 프레임워크 ❌ 라이브러리 ⭕ 📌 자바스크립트와 다른점 리액트는 JSX 구문을 사용한다. JSX 구문은 자바스크립트의 구문을 확장한 HTML과 유사한 코드이다. 📌 리액트 사용하기 리액트를 브라우저 환경에서 사용하기 위해서는 html 파일에 react 와 react-dom 스크립트를 넣어줘야한다. 📌 JSX JSX 는 리액트와 함께 사용한다. 리액트에서 반드시 필요한 것은 아니다. 다만, JSX 를 사용하면 보다 코드가 더 간단해진다. JSX 는 DOM 요소를 추상화한 자바스크립트 객체인 Reac..