TUE

react는 ui를 조작하는 선언적인 방법을 제공합니다. ui를 개별적으로 직접 조작하는 대신 컴포넌트가 있을 수 있는 다양한 상태를 기술하고, 사용자 입력에 반응하여 각 상태들 사이를 전환합니다. 이는 디자이너가 ui를 바라보는 방식과 유사합니다. 🎈선언형 UI와 명령형 UI의 차이점 UI 인터렉션을 디자인할 때 사용자의 행동에 따라 UI가 어떻게 변하는지 폼에 무언가를 입력하면 submit 버튼이 활성화될 것입니다. 제출 버튼을 누르면 폼과 버튼이 비활성화되고 스피너가 나타날 것입니다. 네트워크 요청이 성공한다면 form은 숨겨질 것이고 thank you 메세지가 나타날 것입니다. 네트워크 요청이 실패한다면 오류 메시지가 보일 것이고 form은 다시 활성화 될 것입니다. 명령형 프로그래밍에서 위의 내..

이벤트에 응답하기 🎈 이벤트 핸들러 추가하기 이벤트 핸들러를 추가하려면 먼저 함수를 정의한 다음 이를 적절한 JSX 태그에 prop으로 전달합니다. 올바른 함수 전달 ⭕ handleClick 함수가 onClick 이벤트 핸들러로 전달됩니다. 이렇게 하면 react가 이를 기억하고 사용자가 버튼을 클릭할 때만 함수를 호출하도록 지시합니다. 잘못된 함수 호출 ❌ handleClick()끝에 있는 ()은 클릭없이 렌더링 중에 즉시 함수를 실행합니다. 이는 JSX의 내부의 javascript가 바로 실행되기 때문입니다. 올바른 함수 전달 ⭕ alert('...')}> 이와 같이 인라인 코드를 전달하면 클릭시 실행되지 않고 컴포넌트가 렌더링될 때마다 실행됩니다. 이벤트 핸들러를 인라인으로 정의하려면 익명 함수로 ..

🎈 객체 state 업데이트 state는 객체를 포함해서 어떤 종류의 javascript 값이든 저장할 수 있습니다. 하지만 react state에 있는 객체를 직접 변이해서는 안됩니다. ⇒ 객체의 불변성 대신 객체를 업데이트하려면 새 객체를 생성하고 (혹은 기존 객체의 복사본을 만들고 = spread 연산자) 해당 복사본을 사용하도록 state를 설정해야 합니다. react state에서 객체를 올바르게 업데이트하는 방법 중첩된 객체를 변이하지 않고 업데이트하는 방법 불변성이란 무엇이며, 불변성을 깨뜨리지 않는 방법 Immer로 객체 복사를 덜 반복적으로 만드는 방법 🎈 변이란 무엇인가? javascript 값은 불변, 변이할 수 없거나 읽기전용→ 다시 렌더링을 일으켜서 값을 변화가능 const [x,..

Props 부모 컴포넌트에서 자식 컴포넌트 (Counter)에게 어떤 값을 이름을 붙여 전달하는 것은 Props라 한다. Counter.js import React, { useState } from "react"; //상태를 사용하겠다고 메소드를 추가하기 import OddEvenResult from "./OddEvenResult"; //부모에서 받아온 이름을 매개변수로 사용 const Counter = ({ initialValue }) => { //비구조화 할당, initialValue만 꺼내서 씀 const [count, setCount] = useState(initialValue); //배열을 반환하고 배열의 비구조화 할당을 통해서 0번째 인덱스 카운트, 1번째 인덱스 카운트 해서 받아옴 //use..

State : 계속해서 변화하는 특정 상태, 상태에 따라 각각 다른 동작을 함 웹사이트에서 흔히 사용하는 Dark Mode, Light Mode들도 상태이다. react에서 말하는 상태, state는 컴포넌트가 가진 테마처럼 계속 값이 바뀔 동적인 데이터이다. 그 상태를 관리는 이걸 가진 컴포넌트가 직접 관리한다. import React,{useState} from "react"; //상태를 사용하겠다고 메소드를 추가하기 const Counter = ()=>{ console.log(props); //기본값이 0에서 출발 //1씩 증가하고 //1씩 감소하는 //count상태 console.log("counter 호출!"); //컴포넌트가 가진 state가 변화하면 함수를 다시 호출한다 => 리랜더함 con..

JSX ? 자바 스크립트 문법의 확장 영역이며, 코드가 간결해지고 가독성, 생산성이 높아진다. injection attacks(악의적인 공격자가 보안상의 취약점을 이용하여 임의의 SQL문을 주입하고 실행시킴) 를 방어한다. hello {name} //jsx를 사용함, 여는 태그가 있으면 닫는 태그가 있어야 한다. React.createElement('div', null, `hello, ${name}`); //jsx를 사용안함 const MyHeader = () =>{ return 헤더; }; export default MyHeader; jsx에서 컴포넌트를 만들려면 무언가 return은 필수이다. app.js에서 컴포넌트를 불러와서 랜더는 필수이다. {number}는 : {number % 2 === 0?..