본문 바로가기

분류 전체보기74

01 10 리액트 props 는 뭘까 import './App.css'; import Number from './Number'; function App() { return ( // 1번 ); } export default App; //1번. 상위 컴포넌트에서 하위 컴포넌트에게 어떤 값을 이름을 붙여 전달하는 방식 -> props //-> App 컴포넌트에서 Number 컴포넌트로 10이란 값을 전달 // JSX에서 props를 전달할 때는 {}를 사용하여 값을 감싸고, props의 이름을 명시 //props 는 properties의 줄임말 export default function Number(props) { // 1번 console.log(props) //2번 const [number, setNumber] = useState(0) cons.. 2024. 1. 10.
리액트의 상태관리 state useState는 = 컴포넌트의 상태를 간편하게 생성하고 업데이트 해주는 도구를 제공해준다. state = 컴포넌트의 상태를 뜻함 import { useState } from "react" // import styled from "styled-components" export default function Number() { const [number, setNumber] = useState(0) const add = () =>{ setNumber(number+1) // set console.log(number) } const minus = () => { setNumber(number - 1) console.log(number) } return ( {number} + - ) } //react의 메서드 us.. 2024. 1. 10.
자바스크립트 - 동기처리와 비동기처리 동기식 처리는 코드를 직렬적, 즉 순차적으로 실행하며 어떤 작업이 실행중이면다음 작업은 대기하게 된다. -> 자바스크립트는 단일스레드, 하나의 작업만을 처리하기 때문 비동기식 처리모델은 코드를 병렬적으로 실행, 작업이 종료되지 않은 상태여도 대기하지 않고 다음 작업을 실행한다. DOM 이벤트 핸들러와 Timer 함수(setTimeout, setInterval), Ajax 요청은 비동기식 처리 모델로 동작 function1 이 실행되면 callstack에 쌓인다. 그리고function1은 function2를 호출하므로 function2가 callstack에 쌓이고 setTimeout 함수가 호출, -> setTimeout 콜백함수는 즉시 실행되지 않고 지정된 시간만큼 기다리다가 이벤트가 발생하면 taskQ.. 2024. 1. 5.
1220 / 비동기 처리 패턴 promise PROMISE fetch('https://www.google.com') // fetch 는 promise객체를 리턴 .then((response) => response.text()) // then는 promise 객체의 메소드 .then((result) => {console.log(result);}); promise 3가지 상태 pending - 진행중 fulfilled - 성공 rejected - 실패. response를 정상적으로 받았을 때 fulfilled 상태가 된다 -> 그때 response 콜백이 실행 promise 객체이 작업 성공 결과는 첫번째 파라미터로 넘어옮.(response) promise Chaining 비동기작업을 순차적으로 실행할때 전체 코드를 깔끔하게 하기 위해서 ? fetch.. 2023. 12. 28.
1219 / html 메서드 / fetch fetch / json / ajax / proimse / async / await fetch 요청(request) 웹브라우저 ㅡㅡㅡㅡㅡㅡㅡㅡ>서버 서버로부터 응답이 오면 받음 .then((response) => response.text())// 서버에 리스폰스가 오면 함수 실행 -> 하나의 객체가 되어서 response 라는 파라미터로 넘어옴 .then((result) => {console.log(result);}); //then 메소드는 fetch함수가 리턴하는 어떤 객체의 메소드 -> //promise 객체의 then 메소드는 콜백을 등록하는 메소드 //이전 콜백의 리턴값을 다음 콜백이 넘겨받을 수 있음 fetch 함수는 promise 객체를 리턴 -> promise 객체의 then 메소드로 리스폰스.. 2023. 12. 19.

티스토리툴바