본문 바로가기

전체 글

 (152)
[REACT] - 오늘 한 일과제 수정과제 다시 깃허브에 올리기(잘못된 커밋이었음..)과제 안보고 짜보기 투두리스트 만들기
[REACT] useEffect, useRef 기본구조 마운트: "마운트"는 컴포넌트가 처음으로 화면에 나타나는 시점을 의미하며, 상태 변수와는 별개의 개념입니다.쉽게 말해, 컴포넌트가 DOM에 추가되는 과정.useEffect(() => { // 실행할 코드 return () => { // 클린업 코드 (선택적) };}, [/* 의존성 배열 */]);const ref = useRef(initialValue);const handleFocus = () => { inputRef.current.focus(); // inputRef.current는 실제 DOM 요소를 가리킵니다. }; 주의사항useEffect 주의사항:무한 루프를 피하기 위해 의존성 배열을 적절히 설정해야 합니다.클린업 함수가 필요한 경우, 반환된 함수를 사용하여 리소스를 정리해야 ..
[REACT]숙련주차-useState() {count} { setCount((prev)=>prev+1) setCount((prev)=>prev+1) setCount((prev)=>prev+1) }}> 증가위와 같이 리턴문 안에 렌더링할 수 있는 코드가 있다. 버튼에 기능이 보이는데 prev에 1을 더하는 거로 보인다. 하지만 출력값은 3이다.   prev에 0이 들어가서 1더하면 1,prev에 1이들어가서 1더하면 2, prev에 2가 들어가서 3출력된다는 것이다.
[REACT] 숙련주차 - styled-components 세팅npm add styled-components제일 먼저 터미널에서 적고 기다리면 패키지가 설치되었다는 문구가 뜰 거다. 이후에는 extends에서styled-Components Extractor 설치!import styled from "styled-components";맨위에 코드를 적어주면 세팅 완료.  기본const App = () => { return ( Hello world! This is a simple app );};위 코드처럼 객체형태로 style안에 적으면 되는데 좀더 재밌는 코드를 배웠다.  리팩토링 적용* key 속성은 각 요소에 고유한 값을 부여하여 React가 어떤 요소가 변경되었는지, 추가되었는지, 삭제되었는지를 쉽게..
[REACT] 오늘 한 일리드미 작성카운터 만들기과제 제출
[REACT] React Hooks * 주요 훅스1. useStateuse2. Effectuse3. Contextuse4. Reducer5. useRef1. useStateuseState는 컴포넌트의 상태를 관리하는 훅 import React, { useState } from 'react';const Counter = () => { const [count, setCount] = useState(0); return ( Count: {count} setCount(count + 1)}>Increment setCount(count - 1)}>Decrement );};export default Counter; useState는 상태 변수와 그 값을 업데이트할 수 있는 함수를 반환배열 비구조화 할당을..
[REACT] PROPS(Read-Only)2 //App.jsx setCountryName(e.target.value)} // 입력 시 상태 업데이트 />//App.jsx//MedalForm.jsxconst MedalForm = ({countryName,setCountryName,})
[React] main.jsx는 뭘까? import { createRoot } from "react-dom/client";import "./index.css";import App from "./App.jsx";//여기서 App/ 되어있어서 App.jsx파일이 메인이 됨.createRoot(document.getElementById("root")).render();마지막 줄에서 html에 있는 컨테이너 즉, root를 App에 렌더링하고 있기 때문에 ui에는 App.jsx가 렌더링 되어있다.만약 바꾸고 싶다면, 저기를 고치고 import 해주면 된다.

티스토리툴바