728x90 300x250 SMALL 2024/1125 props에 컴퍼넌트 사용하기 {} 중괄호를 사용해서 props 값으로 컴포넌트를 넣을 수도 있다.// ChildComponent.jsimport React from 'react';const ChildComponent = ({ message }) => { return {message};};export default ChildComponent; message라는 prop를 받아서 그 값을 화면에 표시한다.// ParentComponent.jsimport React from 'react';import ChildComponent from './ChildComponent';const ParentComponent = () => { const customMessage = "안녕하세요, 자식 컴포넌트입니다!"; return ( .. 2024. 11. 10. props에 {} 중괄호 사용하는 이유와 방법 중괄호를 사용하면 무조건 자바스크립트 코드가 들어간다. // 자식 컴포넌트 Greeting 정의function Greeting(props) { return ( 안녕하세요, {props.name}님! 당신의 나이는 {props.age}세입니다. {props.message} );}// 부모 컴포넌트에서 Greeting 사용function App() { return ( );} 위와 같이 숫자에 중괄호를 안쓰면 문자열로 이해한다. 문자열 이외에 정수, 변수, 또는 다른 컴포넌트가 들어갈 경우에는 {} 중괄호로 감싸줘야 한다. 중괄호 없는 경우 // 정적 문자열 중괄호 있는 경우const userName = "홍길동"; // 동적 변수 따라.. 2024. 11. 9. 리액트에서 props란? props란?리액트 공식문서에는 아래와 같이 기술하고 있다.모든 리액트 컴포넌트는 그들의 props에 관해서 Pure 함수 같은 역할을 해야 한다. 이 말은 모든 리액트 컴포넌트는 props를 직접 바꿀 수 없고, 같은 props에 대해서는 항상 같은 결과를 보여줄 것! 여기서 결과란 리액트 엘리먼트를 말한다. Pure함에 대한 개념 정리 참고https://moo-you.tistory.com/1049 Pure함수 Impure함수 개념이해Pure함수 : input을 변경하지 않으면 항상 같은 output을 리턴하는 함수// Pure 함수: 외부 상태에 의존하지 않고, 부작용이 없다function add(a, b) { return a + b;}console.log(add(2, 3)); // 항상 5를 반.. 2024. 11. 8. 리액트 컴포넌트란? 함수형 / 클래스형 리액트(React)에서 컴포넌트UI를 구성하는 독립적이고 재사용 가능한 코드 블록HTML, CSS, 자바스크립트 로직을 하나로 묶어 특정 화면 요소를 정의하며, 리액트 애플리케이션의 기본 단위이다. 리액트는 이러한 컴포넌트를 결합해서 전체 UI를 구성한다.컴포넌트는 크게 함수형 컴포넌트와 클래스형 컴포넌트 두 가지로 나눌 수 있고 최근에는 훅(Hooks)의 등장으로 함수형 컴포넌트가 주로 사용된다. 함수형 컴포넌트(Function Component)리액트에서 가장 단순하고 가볍게 쓸 수 있는 컴포넌트 방식함수처럼 정의되고, props를 받아 화면을 렌더링한다.상태(state)와 생명주기(lifecycle)를 관리하기 위해 리액트 훅을 사용할 수 있다.함수형 컴포넌트 예시import React from '.. 2024. 11. 7. 이전 1 ··· 3 4 5 6 7 다음 728x90 반응형 LIST