filter spread 연산자 key import React, { useState } from 'react'; export default function AppMentor() { const [person, setPerson] = useState(initialPerson); const handleUpdate = () => { const prev = prompt(`누구의 이름을 바꾸고 싶은가요?`); const current = prompt(`이름을 무엇으로 바꾸고 싶은가요?`); setPerson((person) => ({ ...person, mentors: person.mentors.map((mentor) => { if (mentor.name === prev) { return { ...mentor, n..
React(Docs)
map 불변성 spread연산자 import React from "react"; import { useState } from "react"; export default function AppMentors() { const [person, setPerson] = useState({ name: "당신", title: "개발자", mentors: [ { name: "밥", title: "시니어개발자", }, { name: "제임스", title: "주니어개발자", }, ], }); const handleNickname = () => { const prev = prompt(`누구의 이름을 바꾸고 싶은가요?`); const current = prompt(`이름을 무엇으로 바꾸고 싶은가요?`); setPerson(..
객체initialState transform onPointerMove AppXY.css .container { width: 100vw; height: 100vh; background-color: beige; } CSS에서 전체 배경을 설정하고 싶다면 위와 같이 코드를 작성하면 된다. 답안1(state를 개별적으로 작성) AppXY.jsx import React, { useState } from 'react'; import './AppXY.css'; export default function AppXY() { const [x, setX] = useState(0); const [y, setY] = useState(0); return ( { console.log(e.clientX, e.clientY); set..
토글 fetch 삼항연산자 fetch 사용법 fetch는 자바스크립트의 built-in 메서드이다. fetch() 함수는 첫번째 인자로 URL, 두번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환한다. 반환된 객체는, API 호출이 성공했을 경우에는 응답(response) 객체를 resolve하고, 실패했을 경우에는 예외(error) 객체를 reject한다. 두번째 인자인 옵션 객체는 필수가 아니므로 url만을 인자로 설정해도 된다. fetch(url, options) .then((response) => console.log("response:", response)) .catch((error) => console.log("error:", error)); 컴포넌트가 re-rendering ..
불변성 클로저(자바스크립트개념) prop-drilling 불변성 (1) 불변성이란? 불변성이란 메모리에 있는 값을 변경할 수 없는 것을 말한다. 자바스크립트의 데이터 형태중에 원시 데이터는 불변성이 있고, 원시 데이터가 아닌 객체, 배열, 함수는 불변성이 없다. (2) 변수를 저장하면, 메모리에 어떻게 저장이 될까? 만약 우리가 let number = 1 이라고 선언을 하면, 메모리에는 1 이라는 값이 저장된다. 그리고 number 라는 변수는 메모리에 있는 1의 주소값을 참조한다. 그리고 이어서 let secondNumber = 1 이라고 다른 변수를 선언을 했다고 가정해보자. 이때도 자바스크립트는 이미 메모리에 생성되어 있는 1이라는 값을 참조한다. 즉, number와 secondNumber는 변수의..
JSX 문법 React에서 컴포넌트는 함수로 만들 수 있다. 함수네임의 맨첫글자는 대문자로 해줘야함 component는 return()안에 작성하는데 이때 JSX문법을 사용해야한다. JSX문법 React에서 컴포넌트를 반환할때에는 하나의 태그만 반환해야한다. 다수의 태그를 반환하고싶다면 , , 등 부모태그에 다수의 태그를 상속시키는식으로 작성해야한다. class를 사용하고싶다면, class대신에 className을 사용해야한다. 컴포넌트범위내에 자바스크립트문법을 작성하고싶다면 중괄호{}안에 작성할 것 (아래코드에서는 name, style값, list.map등이 이에 해당함) function App() { const name = "inguk"; const list = ["우유", "딸기", "바나나". '..
What's React? "A Javascript library for building user interface by facebook(2013)" 리액트는 웹브라우저뿐 아니라, React Natve를 통한 앱어플리케이션, Electron과의 조합으로 데스크탑어플리케이션까지 빌딩할 수 있다. 리액트는 SPA(Single Page Application), CSR(Client Side Rendering)과 연관성이 많은 라이브러리이다. 또한 Gatsby, NEXT와 리액트를 함께 사용하면 SSG(Static-Site-Generation) , SSR(Server-Side-Rendering)도 구현할 수 있다. Frmaworks VS libraries Frmaworks: UI, Routing, HTTP Clie..
