🔷 React

라이프사이클 (= 생애 주기)Mount ➡️ Update ➡️ UnMount Mount 컴포넌트가 탄생하는 순간               "A 컴포넌트가 Mount되었다."화면에 처음 렌더링 되는 순간          => A 컴포넌트가 화면에 처음으로 렌더링 되었다.  "A 컴포넌트가 Mount되었다." => A 컴포넌트가 화면에 처음으로 렌더링 되었다.  ⬇️  Update  컴포넌트가 다시 렌더링 되는 순간 (변화)리렌더링 될 때를 의미"A 컴포넌트가 Update되었다." => A 컴포넌트가 리렌더링되었다. ⬇️ UnMount컴포넌트가 화면에 사라지는 순간 (죽음)렌더링에서 제외되는 순간을 의미"A 컴포넌트가 UnMount 되었다." => A 컴포넌트가 화면에서 사라졌다. 라이프 스타일 제어 (=>..

1. 컴포넌트 단위로 나누기2. UI 구현컴포넌트에서 Controller.jsx랑 View.jsx를 만들어준다.const Viewer = () => { return ( 현재 카운트 0 );};export default Viewer;const Controller = () => { return ( -1 -10 -100 +100 +10 +1 );};export default Controller; 그뒤 App.jsx의 안에 입력해준다. import './App.css';import Controller from './components/Controller';import Viewer from './compon..

클래스 컴포넌트 기능을 함수 컴포넌트에서도 이용할 수 있는것 2017년도 이전 React.jsClass 컴포넌트Function 컴포넌트모든 기능을 이용할 수 있음UI 렌더링만 할 수 있음문법이 복잡함 Class 컴포넌트의 기능을 낚아채서 가져와서 Function 컴포넌트에 적용낚아채다! 어떻게? Hoooooooooooooooooooooooooooks 🦜🏴‍☠️ useState와 useRef 역시 React Hooks이었음useState - State 기능 낚아챔useRef - Reference 기능 낚아챔 React Hooks는 이름 앞에 use가 붙는다. 리액트 Hooks는 함수 컴포넌트 내부에서만 호출 가능하다. React Hook을 이용해서 나만의 Hook 만들기 가능! Hook 관련 팁1. 함..

회원가입 폼 렌더링해보기더보기import { useState } from 'react';useState는 React의 상태 관리를 위한 Hook인데,App.js 파일 안이나 Register 컴포넌트 안에서 사용되지 않았음.사용하지 않는 import는 보통 경고가 뜨거나 불필요한 코드가 되니까 삭제해도 무방그럼 언제 사용하냐?seState는 "상태를 저장하고 바꾸고 싶을 때" 사용해!예를 들어 버튼을 클릭하면 숫자가 올라가는 기능을 만들때상황useState 써야 할까?버튼 누르면 값이 바뀌어야 해o입력창에 글 쓰면 실시간으로 상태 저장o어떤 요소를 숨기거나 보여주고 싶을 때o단순히 텍스트/컴포넌트 보여주기만 할 때ximport { useState } from 'react';// 간단한 회원가입 폼// 1...

import './App.css';import { useState } from 'react';const Bulb = ({ light }) => { return ( {light === 'ON' ? ( ON ) : ( OFF )} );};function App() { // state 생성 // 기본 구조: const [state, setState] = useState(0); const [count, setCount] = useState(0); // 2. lightState의 값을 on으로 바꾸면 전구가 렌더링된다. const [light, setLight] = useState('OFF'); return ( ..

Event Handling이란 무엇일까?Event - 웹 내부에서 발생하는 사용자의 행동 (버튼 클릭, 메시지 입력, 스크롤 등등)Handling - 다루다, 취급하다, 처리하다=> 이벤트가 발생했을 때 그것을 처리하는 것 (웹에서 발생하는 사용자들의 행동을 처리하는 것) (버튼 클릭시 경고창 노출)각각의 버튼을 누르면 큰솔창에 메일, 카페, 블로그가 출력된다. 첫번째 방법onClick={() => { console.log(text); }} 위의 코드를 이벤트를 실질적으로 처리해서 이벤트 핸들러라고 부른다.  두번째 방법 - 변수로 지정해서 작성하기const Button = ({ children, text, color = 'black' }) => { const onClickButt..

Props로 데이터 전달하기Props란? 컴포넌트에 값 전달하기부모 컴포넌트가 자식 컴포넌트 들에게 마치 함수의 인수를 전달하듯 원하는 값을 전달해주는게 가능하다.이렇게 전달된 값을 props라고 한다.  props를 이용하면 좋은점props를 이용하면 컴포넌트를 마치 함수를 호출하듯이 전달하는 값에 따라서 각각 다른 UI를 렌더링하도록 만들 수 있다.전달받은  props의 값을 활용하는 방법props라는 매개변수에 객체 형태로 값이 저장되어있음으로 점 표기법을 사용해 props.text를 렌더링하도록 설정하면 버튼 안에 각각의 렌더링된다.  그렇다면 컬러의 값도 활용하려면 어떻게 해야할까? 버튼의 style을 color는 props의 color라고 설정해주면 된다. 버튼이 빨간색으로 렌더링된것을 확인할..

JSX로 UI 표현하기JSX란?확장된 자바스크립트 문법을 의미한다.이렇게 자바스크립트랑 HTML 코드를 혼용해서 작성가능하다.  ⚠️ JSX 주의 사항1. 중괄호 내부에는 자바스크립트 표현식만 넣는다. - 자바스크립트 표현식? 삼항 연산자나 변수의 이름처럼 특정 값으로 평가    중괄호 안에 if문을 작성하면 오류 발생2. 숫자, 문자열, 배열 값만 랜더링const Main = () => { const number = 10; const obj = { a: 1 }; return ( main {/* js값을 html로 렌더링하고 싶으면 js코드에 중괄호를 작성해야된다. */} {/* 삼항 연산자도 사용이 가능하다 */} {number % 2 === 0 ? '..

React 컴포넌트함수로 만든 컴포넌트를 React에서는 함수 컴포넌트라고 부른다. 화살표 함수로도 만들 수 있다. import './App.css';// html 태그를 반환하도록 설정하는 것 => 컴포넌트// 컴포넌트를 부를때는 보통 함수 이름을 부른다.const Header = () => { return ( header );};// 이거는 App 컴포넌트function App() { return ( Welcome to React );}function Header() { return ( header );}export default App;클래스보다는 함수를 이용해서 만드는 것이 훨씬 일반적이다 ...