728x90 반응형 분류 전체보기169 [TIL] 11/4 프론트엔드 심화1 - 모르는거 정리 리액트 리덕스 정리본 상태의 일관성을 유지하고 디버깅이 쉬움불변성(Immutability): 리덕스는 상태를 직접 " data-og-host="everydayc0ding.tistory.com" data-og-source-url="https://everydayc0ding.tistory.com/entry/React-Redux-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-feat-TypeScript" data-og-url="https://everydayc0ding.tistory.com/entry/React-Redux-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-feat-TypeScript" data-og-image="https://scrap.kakaocdn.net/d.. 2024. 11. 4. [React.js] 5주차 - Counter 만들기, useEffect 1. Counter 만들어보기 Viewer 컴포넌트는 count 값을 보여주고 있고, Controller 컴포넌트는 count 값을 증가시킬 수 있는 버튼을 가지고 있다. 두 컴포넌트는 state 변수인 count 를 공유하고 있는데, Viewer 와 Controller 컴포넌트는 병렬적인 관계이기 때문에 props 공유가 불가능하다. 그래서 두 컴포넌트의 부모 컴포넌트인 App 컴포넌트에 state 변수를 두고 자식 컴포넌트인 Viewer, Controller 컴포넌트에 count 변수를 공유해준다. 이렇게 공유되는 state 를 계층 구조의 맨 위로 끌어올려 아래 컴포넌트들이 모두 공유할 수 있도록 만드는 것을 State Lifting 이라고 한다. 리액트에서 데이터는 위에서 아래로 단방향으로 흐르기.. 2024. 11. 4. [TIL] 11/1 props, 모달창 만들기 1. props일반 함수의 매개변수와 비슷하다고 생각하면 된다. props 는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 넘길 때 사용한다. (역방향, 자식 -> 부모로는 불가능) 1.1. 함수형 컴포넌트에서 props 사용하기 부모 컴포넌트에서 "맑음" 을 넘겨주면 자식 컴포넌트에서 받아서 사용할 수 있다. 타입스크립트는 타입이 존재하기 때문에 자바스크립트와는 다르게 props 의 타입을 지정해줘야 한다. // App.tsx -> 부모 컴포넌트function App() { return ( );}export default App;// MyWeather.tsx -> 자식 컴포넌트interface MyProps { weather: string; children: Re.. 2024. 11. 1. [TIL] 10/31 클래스/함수형 컴포넌트, useState 1. 컴포넌트 원래 리액트에서는 클래스형 컴포넌트를 썼지만, 리액트 18버전 이후로 리액트 훅이란 것이 생기면서 함수형 컴포넌트에서 state 관리, 라이프사이클 등을 사용할 수 있게 되면서 더 간단하게 사용할 수 있는 함수형 컴포넌트를 사용하고 있다. 1.1. 클래스형 컴포넌트 Component 클래스를 상속해야 하기 때문에 Component 를 import 해와야한다. 클래스형 컴포넌트에서는 render() 메서드를 통해 화면을 그린다. import { Component } from "react";class ClassCom extends Component { render() { return ( 클래스형 컴포넌트 .. 2024. 10. 31. 이전 1 ··· 4 5 6 7 8 9 10 ··· 43 다음 728x90 반응형
