728x90 반응형 props4 [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. [React.js] 4주차 - state, useState, useRef, React Hooks, 렌더링 1. State State 는 현재 가지고 있는 형태나 모양을 정의하고, 변화할 수 있는 동적이 값을 말한다. 리액트에서 모든 컴포넌트들은 State 를 가질 수 있는데(한 개의 컴포넌트는 여러개의 State 를 가질 수 있음), State 를 갖는 컴포넌트들은 이 State 값에 따라 렌더링 되는 UI 가 결정된다. 이 때 컴포넌트의 State 값에 따라서 화면이 다시 렌더링 되는 것을 리 렌더(Re-Render) 또는 리 렌더링(Re-Rendering) 이라고 한다. 1.1. useState 사용하기 useState 를 사용하려면 리액트의 내장 함수인 useState 를 import 해줘야 한다. import { useState } from 'react'; useState 함수를 호출하고 반.. 2024. 10. 29. [React.js] 3주차 - React.js 입문(1) 1. React 컴포넌트리액트에서는 HTML 태그를 반환하는 함수를 컴포넌트라고 하며, 보통 함수의 이름을 따서 부른다. 컴포넌트는 함수 선언식이나 화살표 함수를 사용해 만들 수 있다. 컴포넌트를 만들 때 컴포넌트 이름의 첫글자는 꼭 대문자로 적어줘야 하는데, 그렇지 않으면 리액트 내부적으로 컴포넌트로 인식하지 않기 때문이다. // 함수 선언식function Header() { return ( header );}// 화살표 함수const Header = () => { return ( header );} 2. JSX (JavaScript Extensions) 리액트는 jsx 즉, 확장된 자바스크립트의 문법을 사용하기 때문에 자바스크립트에서는 불가능.. 2024. 10. 14. [React+JS/리액트] 웹 스터디 3주차 자식이 부모의 state 를 가져다 쓰고 싶을 때: props function App (){ let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']); return ( )}function Modal(){ return ( { 글제목[0] } 날짜 상세내용 )} 위의 코드를 실행시키면 '글제목' 이라는 변수가 define 되지 않았다는 에러 발생-> 글제목이라는 state 변수는 function App() 에 있지 function Modal() 에 없기 때문 props 를 사용해서 state 전달하기 1. 자식 컴포넌트를 사용하는 곳에 가서 (tip: '작명' 은 보통 state.. 2024. 5. 8. 이전 1 다음 728x90 반응형
