1. useEffect() useEffect() 란 컴포넌트가 랜더링 되었을 때 특정 작업을 실행해 주는 hook 이다. 이는 컴포넌트가 Mount, Unmount, Update 시에 특정 작업을 처리한다. 2. useEffect() 사용하기 useEffect() 의 기본형태는 useEffect(함수, 검사하고자 하는 배열) 식으로 사용된다. 거두절미하고 코드를 통해 알아보자. useEffect(() => { console.log('컴포넌트가 랜더링 될 때마다 실행') }) useEffect() 를 다음과 같이 사용하면 컴포넌트가 랜더링 될 때마다 useEffect() 안에 있는 함수가 실행된다. useEffect(() => { console.log('컴포넌트가 마운트 될 때마다 실행') }, []) u..

onChange 이벤트를 사용해서 input 태그 내에 있는 값을 핸들링해볼 것 이다. onChange 이벤트는 요소의 무언가가 바뀌었을 때 호출되는 함수이다. 따라서 input 값의 onChange의 event value값을 state로 넘기고, state에서 Value를 지정하면 수정이 된다 import React from "react"; import {useState} from "react"; const Form = () => { const [name, setName] = React.useState(""); return ( setName(e.target.value)} value={name} /> ); }; 여기서 e는 event가 들어오고 target.value는 이벤트가 발생된 곳의 Value를 ..

배열의 인덱스나 id로 상태를 바꾸고 싶다면 많은 고민이 필요하다. 무슨 코드로 처리해야 할까? 먼저 그 컴포넌트 안에서 State로 관리를 할 수 있지만 그닥 좋은 방법은 아니다. 관리해야 하는 State가 너무 많아지기 떄문에 부모에서 함수를 처리 할려고 한다. import React from 'react' const Box = ({ id, on, toggle }: { id: number; on: boolean; toggle: (id: number) => void }) => { const styles = { backgroundColor: on ? '#222' : '#ccc', } return toggle(id)} style={styles} id="box"> } export default Box 이런 ..

map을 사용하여 중복되는 컴포넌트를 반복해보자. import Card from "./Card"; import "./styles.css"; import "./map"; import data from "./data"; export default function App() { return ( {data.map((data) => ( ))} ); } 이런 식으로 컴포넌트에 data를 map을 통해 반복하여 넣을 수 있다. map으로 props를 넘겨서 사용할 수 있기 떄문에 여러 객체를 사용할 떄 유용하다 const Card = ({ star, img, review, desc, price, detail,titie,contribute }) => { return ( {star} ({review}){contribut..

먼저 props란 1. 프로퍼티(props)란? - 프로퍼티, props(properties의 줄임말) 라고 한다. - 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다.(단방향 데이터 흐름 갖는다.) - 프로퍼티는 수정할 수 없다는 특징이 있다.(자식입장에선 읽기 전용인 데이터이다.) 2. 사용방법? - 프로퍼티에 문자열을 전달할 때는 큰따옴표(" ")를, 문자열 외의 값을 전달할 때는 중괄호({ })를 사용 한다. 컴포넌트에 props를 넘겨주자. import "./styles.css"; import Test from "./Test"; export default function App() { const date = new Date(); return ( ); } const dateParser = ..

JSX란 JavaScript의 확장 문법으로, 변수 안에 HTML 태그를 삽입할 수 있는 신기한 문법이다. const A = Hello World console.log(A); 보통 리액트에서는 JSX 문법을 사용하여 HTML 태그를 함수 내에서 리턴한다. JSX에서는 HTML태그 내에 중괄호를 사용하여 모든 자바스크립트 표현식을 사용할 수 있다. const B = () => { const num = 3; return ( my number is {num}. {/* my numbser is 3. */} ) } 또한 JSX에서는 두 개 이상의 부모 컴포넌트를 사용하는 것이 불가능하다. 꼭 최상위의 부모는 한 개여야 에러가 발생하지 않는다. j sx 문법을 통해 컴포넌트를 만들어보자. const MyPage =..

index.js를 작성해보자. 예전에는 ReactDOM.render() 함수를 통해 index.js 함수를 구성했으나, React18부터 여러가지 기능이 변경되면서 index.js를 구성하는 방식도 약간 바뀌었다. 다음의 코드를 통해 index.js를 구성해보자. import { createRoot } from "react-dom/client"; const rootElement = document.getElementById("root"); const root = createRoot(rootElement); root.render(Hello); react dom에서 지원하는 createRoot 함수를 통해 public/index.html의 root div를 가져와 렌더하는 방식으로 구성할 수 있다. 오늘은 ..