인기영화 추천 사이트를 구현하다 간단해 보이지만 해결되지 않는 오류를 발견했다. 여기서는 movie라는 프로퍼티를 받을 수 없다는데 그럴리가 없다... 오류 부분의 코드를 보자 import { useEffect, useState } from "react"; import { useParams } from "react-router-dom"; const Detail = () => { const [detail, setDetail] = useState({}); const { id } = useParams(); const getDetail = async () => { const json = await ( await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id..

1. 안되는 이유와 , ChatGPT의 답변 ChatGPT의 답변은 다음과 같다. React에서 input 태그의 value 속성에 상태값을 넣으면, 그 값은 읽기 전용 상태가 되어 변경할 수 없습니다. 대신, onChange 이벤트 핸들러를 사용하여 입력 값을 변경해야 합니다. 이유는 React에서는 단방향 데이터 흐름을 사용하여 컴포넌트의 상태를 업데이트하고 렌더링하는 방식으로 작동하기 때문입니다. 그래서 input 태그의 value 값이 변경되면 React는 이를 새로운 상태로 인식하고, 이에 따라 컴포넌트를 다시 렌더링합니다. 그러나 value 값이 읽기 전용이기 때문에 이를 변경할 수 없으므로, onChange 이벤트 핸들러를 사용하여 상태를 업데이트하고 새로운 값을 입력하는 것이 필요합니다. ..

coin의 정보를 가져올때, 렌더링시 단 한번만 가져오면 되기 때문에, useEffect를 다음과 같이 이용한다. useEffect(()=>{}, []) []인자에 아무것도 적지 않으면, 렌더링 후 딱 한번만 실행된다. 예시 상태값 coins에 api를 저장하고, coins.map을 통해 내부요소를 그려보는 코드다. https://api.coinpaprika.com/v1/tickers import React, { useEffect } from "react"; function App() { const [coins, setCoins] = React.useState([]); useEffect(() => { fetch("https://api.coinpaprika.com/v1/tickers") .then((res..

useState는 컴포넌트에서 변경되는 값을 관리하기 위해 사용된다. React.useState()는 [state, modifier]를 반환한다. 이해를 위한 예시는 다음과 같다. const [값, 값 세팅 함수] = React.useState(초기값); 카운터를 만드는 예시. import React, { useEffect } from "react"; function App() { const [counter, setCounter] = React.useState(0); const handleClick = () => { setCounter(counter + 1); }; return ( {counter} CLICK ); } export default App; 상수인const로 선언을 했는데도 counter를 ..

효율성 JSX는 JavaScript의 확장 문법이다. JSX를 처음 접했을 때 html과 js를 js공간에서 자유자제로 다룰 수 있는 걸 보고 놀라웠다. 아니나 다를까 JSX는 JavaScript XML의 약자였다. 다룰때는 요런식으로 다룬다. const element = Hello, world; React에서 JSX사용이 필수는 아니지만, 대분의 사람은 js코드 안에서 UI관련 작업을 할 때 시각적으로 더 도움이 된다고 생각한다고 한다. React에서 JSX를 사용하지 않고 위의 element와 같은걸 선언 하려면 다음과 같이 작성해야한다. const element = React.createElement("h1", {id: "greet"}, "Hello World"); 보기도 불편하고, 정말 끔찍하다...