react 썸네일형 리스트형 리액트의 state랑 props에 관하여 간단정리 state란? 컴포넌트 내부의 변화하는 값 특정 상황이나 시점에 따라 달라질수 있는값은 state를 만들어 처리해줘야 함 Ex) counter 수 Ex) inputxormdml value값 useState란? 컴포넌트에서 state(상태)를 다룰 때 사용하는함수 useState 함수는 배열을 반환 0번째 인덱스에는 state값 1번째 인덱스에는 state를 업데이트할때 사용하는 함수(setter) 변화하는 값을 화면에 보여줘야 할때? (일반변수를 사용하면 렌더링이 안되는 이유) state가 아닌 일반 변수는 렌더링을 일으킬수 없음 렌더링: 가장 최신 버전의 컴포넌트 상황을 가져오기 위해 컴포넌트를 실행하는 것 컴포넌트는 함수, 즉 렌더링 발생==컴포넌트 실행==함수 호출 함수 호출? 컴포넌트 내부에 있는.. 더보기 기상청 리액트 구현 import React, { useState } from 'react'; import styled from 'styled-components'; import axios from 'axios'; function App() { const API_KEY = '0b99d295cfa7cbbaa3cdc197e28cacc4'; const [location, setLocation] = useState(''); const [result,setResult] = useState({}); const url = `https://api.openweathermap.org/data/2.5/weather?q=${location}&appid=${API_KEY}`; const searchWeather = async (e) => { if .. 더보기 리액트 영화관 코드 분석 물론! 이해를 돕기 위해 제가 보내드린 코드를 하나씩 설명드리겠습니다. App 컴포넌트: App 컴포넌트는 영화 리스트를 관리하고 화면에 보여주는 역할을 합니다. useState 훅을 사용하여 movieTitle, movieYear, 그리고 movies 상태를 선언합니다. movieTitle은 사용자가 입력하는 영화 제목을, movieYear는 사용자가 입력하는 영화 개봉년도를 저장합니다. movies는 영화 리스트를 배열로 저장하는데, 초기값으로 세 개의 객체를 포함하고 있습니다. useEffect 훅을 사용하여 컴포넌트가 렌더링될 때마다 "render"라는 메시지를 콘솔에 출력합니다. renderMovies 함수: movies 배열을 map 함수를 사용하여 순회하며, 각각의 영화 정보를 Movie 컴.. 더보기 비동기를 이해해보자. 자바스크립트 콜백함수 -> 이벤트 루프 -> promise 객체 javascript os synchronous (자바스크립트: 동기적) 호이스팅이 된 이후부터 코드가 작성한 순서부터 동기적으로 실행 호이스팅 : var 변수와 function declartion 선언들이 제일 위로 올라가는것. async는 비동기적으로 언제 코드가 실행될지 예측할수 없는것 ex) setTimeout 지정한 시간이 지나면 콜백함수 호출(callback = 나중에 다시 불러줘) 동기와 비동기 자바스크립트 엔진은 제일 위에서부터 아래로 출력 setTimeout은 브라우저 api 응답을 기다리지 않고 console.log로 넘어감 브라우저에서 1초의 시간이 지난후에 그때서야 console.log("1")을 출력하게 된다. 콜백 마.. 더보기 redux - dispatch란? 🎊🎎 Redux는 React 애플리케이션에서 전역 상태 관리를 용이하게 해주는 라이브러리입니다. React 컴포넌트들 사이에서 상태를 공유하거나 관리해야할 때 Redux를 사용하면 편리합니다. Redux의 기본 개념은 단일 스토어(Store)에 상태(State)를 저장하고, 액션(Action)이라는 객체를 통해 상태를 업데이트하는 방식으로 동작합니다. dispatch는 Redux 스토어에 액션을 보내는 함수이며, 스토어는 해당 액션을 받아 상태를 변경하는 역할을 수행합니다. 이를 통해 상태 관리를 중앙 집중화하여 애플리케이션의 데이터 흐름을 예측 가능하고 유지 보수가 용이하게 만듭니다. 스크린샷 2023-07-10 오후 8.20.32 import React from 'react' import {useD.. 더보기 #props ⁎ props는 부모가 자식한테 전달 에서 child 옆에 value이 props import React, {Component} from'react'; import Myname from './Myname'; class App extends Component { render(){ return( ) } } export default App; import React, {Component} from 'react'; class Myname extends Component { render(){ return( 안녕하세요 제 이름은 {this.props.name}입니다 ) } } export default Myname; ⁎제 이름은 리액트입니다 이렇게 나오는 이유 주어진 코드에서 App 컴포넌트는 Myname 컴포넌트.. 더보기 #state Counter.js import React, {Component} from 'react'; class Counter extends Component { state = { number : 0 } handleIncrease = () =>{ this.setState({ number: this.state.number +1 }) } handleDecrease = () =>{ this.setState({ number: this.state.number -1 }) } render(){ return( 카운터 값: {this.state.number} + - ) } } export default Counter; // +를 누르면 계속 값이 바뀌고 컴포넌트는 리렌더를 해줘야하는데 // 그걸 하기 위해서 // 1.우선 stat.. 더보기 리액트 지뢰임의의 자리에 3곳 배치 import React, { useState } from 'react'; import Square from './Square'; const Board = () => { const [mines, setMines] = useState([0,3,8]); // 지뢰 위치를 저장하는 배열 const [clicked, setClicked] = useState([]); // 클릭 여부를 저장하는 배열 // 클릭 이벤트 처리 함수 const handleClick = (index) => { // 이미 클릭한 위치인 경우 아무 작업도 하지 않음 if (clicked.includes(index)) { return; } // 클릭한 위치를 clicked 배열에 추가 setClicked([...clicked, index]); .. 더보기 이전 1 2 3 4 다음 목록 더보기
