Frontend/React18 [ 리액트(React) ] 모바일화면이 벗어날 때 ⚡️ 구현 팁 웹페이지에서는 내가 설정한 화면 그대로 잘 나오는데 모바일화면에서는 화면이 깨지거나 벗어날 때 index page에서 viewport 코드가 잘 있는가? 💡 배운 점: 코드를 지울 때는 왜 지우는지 생각하자. React Hemlet을 사용하기위해 public안에있는 index.html내용을 모두 지우고 App.js에 새로 작성했지만, 결과적으로 해당 코드가 없어 모바일화면은 정상적으로 출력되지 않았다. 만약 지금의 상황과 비슷하다면 index,html페이지를 한번 살펴보자. 2021. 5. 5. [ 리액트(React) ] props로 전달한 파라미터가 정상적으로 함수에 적용되지 않을 때 ⚡️ 구현 팁 props로 전달받은 값들을 새로운 함수를 거쳐서 나올 때 의도한 대로 동작하지 않으면 다음을 확인해보자. 함수 안에 props를 바로 적용하진 않았나? - (X) 컴포넌트 안에 함수를 선언하고 props로 받은 값들을 파라미터로 넣었는가? - (O) 💡 배운 점: 테스트코드의 중요성 이와 같은 문제가 생기지 않기 위해 기능별로 잘라 단계적으로 실행해보면 실패를 줄일 수 있다. 해당 함수만 따로 console.log에 옮겨서 내부 기능을 먼저 테스트해본다. 함수 내부적으로 문제가 없다면 props에서 받은 변수를 함수에 넣어본다. 어디에서 잘못됐는지 확인한다. // 공통 실행코드 const Loading = ({ shortPower, longPower }) => { const eFuncti.. 2021. 4. 28. [ 리액트(React) ] Route에서 props 전달이 안될 때 ⚡️ 구현 팁 React Router를 사용할 때 props가 정상적으로 전달되지 않으면 어떤 component에 props를 주고있는지 확인해보자. 나는 1번과 같이 코드를 간결하게 작성하려고 한 줄로 작성했다가 왜 안되나 했더니 Route컴포넌트에 props를 전달해주는 코드기 때문이다. import Loading from "../pages/Loading"; import React, { useState } from "react"; import { BrowserRouter as Router, Route } from "react-router-dom"; const App = () => { const [score, setScore] = useState(0); // declare useState return(.. 2021. 4. 28. 이전 1 2 3 4 다음
