react38 [React] useRef의 응용과 createPortal 에 대해 알아보자 목차 useRef를 통해 코드 간소화하기아래처럼 input에 값을 넣고 변경하는 것을 만들려면 불필요하게 상태와 코드가 많이 필요하다.import { useState } from "react";export default function Player() { const [Name, setName] = useState(""); const [edit, setEdit] = useState(true); function handleChangeNmae(e) { setName(e.target.value); } function handleSubmit() { setEdit(false); } return ( {edit ? "Welcome unknown entity" : `Welcome.. 2024. 7. 4. [React] 디버깅의 방법을 예를 통해 알아보자 오류 예제 코드https://codesandbox.io/p/sandbox/debugging-start-vy38s8?file=%2Fsrc%2Findex.js%3A7%2C1 https://codesandbox.io/p/sandbox/debugging-start-vy38s8?file=%2Fsrc%2Findex.js%3A7%2C1 codesandbox.io리액트 디버깅하기 위와 같은 코드에서 아래와 같은 오류가 생겼다면 다음과 같이 해석할 수 있다. valueEndOfYear이 정의 되지 않았다.따라서 그 값부터 확인해보자 또한 아래 메세지들은 스택 트레이스로 이 오류로 인해 이어지는 코드의 목록이다.따라서 다음과 같이 해결할 수 있다. -> caculatorInvestmentResults 함수를 보면 duat.. 2024. 6. 30. [React] css에 대해 알아보자 [styled component] 목차 이전 바닐라 css편 참고https://be-senior-developer.tistory.com/125 React 스타일링에 대해 알아보자 [바닐라 css]목차 React에서는 css 스타일링의 방법이 여러가지가 있다그 중에서 바닐라 css 여러 사용방법과 장단점에 대해 알아보자 바닐라 css우리가 잘아는 바닐라 css로 아래와 같이 사용한다.import "./Lecturbe-senior-developer.tistory.com React에서는 css 스타일링의 방법이 여러가지가 있다.그 중에서 styled component에 대해서 알아보자 기본적인 사용법import styled from "styled-components";const MessageWrapper = styled.div` disp.. 2024. 6. 30. [React] css에 대해 알아보자 [바닐라 css] 목차 React에서는 css 스타일링의 방법이 여러가지가 있다그 중에서 바닐라 css 여러 사용방법과 장단점에 대해 알아보자 바닐라 css우리가 잘아는 바닐라 css로 아래와 같이 사용한다.import "./Lecture3.css";//이런식으로 불러서 사용import Lecture2 from "./Lecture2";function Lecture3() { return ( hello world );}export default Lecture3; 문제점css규칙들은 컴포넌트에 속하지 않기 때문에 스코핑이 되지 않는다이해하기 어렵다면 아래 코드를 보면 된다.function Lecture2() { return ( hello world2 );}expo.. 2024. 6. 29. 이전 1 ··· 5 6 7 8 9 10 다음 728x90
