# defaultProps

16개의 포스트
post-thumbnail

Props

props > 컴포넌트에 데이터를 전달하는 가장 기본적이고 효율적인 방법 1. props 데이터 전달하기 📍부모 컴포넌트 App.js 1) 단일 데이터 불러온 컴포넌트에 initialValue로 데이터 삽입 2) 다중 데이터 데이터를 객체로 만들어 컴포넌트에 객체 spread 형식으로 삽입 📍자식 컴포넌트 Counter.jsx 1) 단일데이터 불러오기 props를 매개변수로 받아오고 useState에 점표기법으로 불러서 사용함 2) 다중데이터 불러오기 비구조화할당을 통해 매개변수로 전달되는 props 객체에서 필요한 값만 사용 가능함 📌 defaultProps 부모 컴포넌트에서 전달받지 못한 props의 기본값을 설정하여 에러를 방지할 수 있다. 2. props 컴포넌트 자체를 전달하기 (children) 리액트는 컴포넌트로 컴포넌트를 감싸서, 감싼 컴포넌트에 내부 컴포넌트 자체를

2023년 7월 24일
·
0개의 댓글
·
post-thumbnail

[Front-end] 수업 #069일 3-5

React 컴포넌트생성 & 변수스타일 일단 우리는 3가지의 링크가 필요하다 🕵️‍♀️필수 > >HTML DOM 연동의 개념을 이해하기 위해 HTML에는 root 와 app을 만들어 두었다. >Script 우선 JSX문법을 사용하기 위해 script의 type은 text/bable 로 꼭 적어준다. 01. 기본으로 있는 상태관리 (defaultProps) >defaultProps 란? 클래스 컴포넌트의 기능으로 props에 기본값을 세팅할 수 있도록 도와준다. >1번 예제 Section1Component의 defaultProps를 만든다. title : s

2023년 2월 6일
·
0개의 댓글
·
post-thumbnail

React Native defaultProps 사용

✅ components라는 폴더를 생성하고, 그 안에 Greeting.js 파일을 먼저 생성했습니다. ✅ 그리고 App.js 코드는 다음과 같이 작성했습니다. Greeting 컴포넌트를 App 컴포넌트에서 불러와서 사용합니다. ✅ Greeting.js 코드는 다음과 같이 작성했습니다. defaultProps는 컴포넌트에 Props를 지정하지 않았을 때 사용할 기본값을 설졍해주고 싶을 때 사용하면 됩니다. 코드를 저장 후 실행하면 이렇게 나타납니다!

2023년 1월 17일
·
2개의 댓글
·

PRE - React 기본구조, 문법

replit 50개 이상의 프로그래밍 및 언어를 지원하는 통합 개발 환경 서비스 replit을 이용하여 react 시작 전 기본 구조를 익힘 기본 파일 구조 jsx확장자를 js로 표기해도 무방하지만, react의 js파일이라는 의마로 jsx로 명시해 주는 것이 좋음. 만든 jsx파일명의 제일 앞 문자는 대문자로 통일하는 것을 권장. src파일 속 문서들을 주로 편집, public에는 img등을 담음. index.html body - id가 root인 div와 index.jsx를 호출하는 srcipt를 명시 index.jsx index.jsx 또는 main.jsx impo

2022년 12월 6일
·
0개의 댓글
·
post-thumbnail

PRE - React 기본구조, 문법

replit 50개 이상의 프로그래밍 및 언어를 지원하는 통합 개발 환경 서비스 replit을 이용하여 react 시작 전 기본 구조를 익힘 기본 파일 구조 jsx확장자를 js로 표기해도 무방하지만, react의 js파일이라는 의마로 jsx로 명시해 주는 것이 좋음. 만든 jsx파일명의 제일 앞 문자는 대문자로 통일하는 것을 권장. src파일 속 문서들을 주로 편집, public에는 img등을 담음. index.html body - id가 root인 div와 index.jsx를 호출하는 srcipt를 명시 index.jsx index.jsx 또는 main.jsx impo

2022년 11월 1일
·
0개의 댓글
·

[리액트를 다루는 기술] 클래스형 컴포넌트로 변환하기(defaultProps & propTypes)

import {Component} from 'react' 추가 클래스 이름 옆 extneds Component 추가 defaultProps & propTypes는 외부에 선언할도 있고 static을 사용해 내부에 선언할 수도 있음 render() 안에서 함수형 컴포넌트와 같은 방식으로 작성 props를 비구조할당으로 가져올 때 this 붙여주기

2022년 9월 1일
·
0개의 댓글
·
post-thumbnail

[리액트를 다루는 기술] 컴포넌트의 defaultProps 와 props.children

defaultProps props에 전달받은 값이 없어도 오류 안 남 component.defaultProps 후 객체로 설정 props.children > ## 결과 사용한 component 사이에 내용을 넣으면 props.children으로 넘겨짐

2022년 9월 1일
·
0개의 댓글
·

[TIL] 220502

React Link next/link 공식 문서 오늘 만난 에러😍 > You provided a checked prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultChecked. Otherwise, set either onChange or readOnly. <i style

2022년 5월 2일
·
0개의 댓글
·
post-thumbnail

React - defaultProps

props 받아오기 React에서 props를 받아오는 방법은 간단합니다. 아래 코드는 구조분해할당을 통해 props를 받아오는 코드입니다. defaultPropsf 란? 값이 없는 props를 받으면 undefined가 출력되고 에러가 생길수 있습니다. 이 때 defaultPropsf 메서드는 props의 기본값을 지정해주는 메서드를 사용해 볼 수 있습니다. 하단에 defaultPropsf를 선언 해주는 방법과 props를 받을때 사용 할 수 있습니다.

2022년 2월 24일
·
0개의 댓글
·
post-thumbnail

[React] map( )을 이용한 배열 렌더링 (feat.일기장)

💡map() 이란? 자바스크립트 배열 내장함수 리액트에서 동적인 배열을 렌더링해야 할 때는 자바스크립트 배열 내장함수인 map()을 사용하여 일반 데이터 배열을 리액트 엘리먼트로 이루어진 배열로 변환해줍니다. > map() 함수는 배열안에 있는 각 원소를 변환할때 원소들을 이용하여 새로운 배열을 만들어줍니다. 렌더링이란? = 간단하게 말하자면 화면에 나타낸다 📖예제 배열을 이용하여 React에서 List렌더링을 해보고 개별적인 컴포넌트로 만들어보기 실제로 리액트에서 배열은 게시글, 리스트, 피드를 표시하는데에 자주사용된다. 먼저 일기리스트컴퍼넌트를 작성할 DiaryList.js파일을 만들어준다. 1. DiaryList.js 일단 들어가기전에, 임시배열(dummyList)을 만들어서 DiaryList에 prop으로 데이터를 전달한 후 그 데이터를 리스트 렌더링하는것부터 연습해보자 2. App.js 시간객체에 생성자를 아무것도안넣고

2022년 1월 4일
·
0개의 댓글
·
post-thumbnail

#17.TIL | React(defaultProps)

Props Props는 Properties의 줄임말로 우리가 어떠한 값을 자식 Component한테 전달할때 Props를 사용할 수 있다. 그전에 벨로그에 정리했던 글처럼 이렇게 변수뿐만 아니라 state등 다양한 데이터를 보내줄 수 있다. defaultProps defaultProps는 Props를 따로 지정해주지 않아도 기본값으로 전달 해주는 Props로 ![](https://images.velog.

2021년 11월 20일
·
0개의 댓글
·
post-thumbnail

[React #4] React 만능키 {props} & Event handler

React Component들이 서로 연결되고 반응하기 위해서는 하나의 component 값들을 다른 component로 보내주어야 한다. 하나의 컴포넌트에서 다른 컴포넌트로 넘겨주는 값, 정보(information)를 "props"라고 한다. Props properties의 줄임말로 컴포넌트의 속성값을 의미한다. (=HTML의 attribute) 정의한 React 컴포넌트를 사용할 때 parameter로 속성을 받아 사용할 수 있는데, 이 때 props를 쓴다. props는 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체이며, 하나의 컴포넌트에 대한 정보를 담고 있다. 따라서, .(dot)으로 속성명에 접근가능하고, props.속성명으로 속성 값을 가지고 올 수 있다. this.props 또한, props를 통해 부모 컴포넌트로부터 자식 컴포넌트에게 state의 상태값, event handler를 넘겨줄 수 있다.

2021년 10월 2일
·
0개의 댓글
·
post-thumbnail

4장. React Props 사용

📌 Props란? > 컴포넌트 끼리 값을 전달하는 수단 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용한다. (하위 컴포넌트가 상위 컴포넌트의 값을 바로 참조할 수 없다는 의미를 뜻함) 객체, 배열 등 유형과 상관없이 모든 것이 전달 가능 💡 defaultProps > 실수로 Props 를 빼먹은 경우, 특정 상황에 Props 를 일부러 비워야 할 경우를 대비해 설정 설정 방법-1 (최신 방식) render() 윗 부분에 작성 설정 방법-2 class 밑(밖)에서 설정 📝 실습 코드 > App.js Class형 컴포넌트 이용한 MyName.js 함수형 컴포넌트 이용한 MyName.js 기능 없이 받아서 보여주기만 하는 경우 주로 이용 코드의 상단에 { Component } 를 import하지 않아도 됨. 결과 Page 1

2021년 6월 14일
·
0개의 댓글
·
post-thumbnail

[Modern React with Redux] 00 주말 리액트 복습

벨로퍼트와 함께 하는 모던 리액트의 코드를 따라 쳐보며 주말동안 리액트를 복습! 사실 부트캠프 수료 후, 과제를 하고 또 복습을 하며, 리액트를 정말 수박 겉핥기 식으로만 알고 있었다는 걸 다시 한 번 실감한다. Fragment 리액트에서는 JSX문법을 사용하기 때문에, return문 안쪽의 태그들을 꼭 하나의 태그로 감싸줘야 한다! 그럴 때 별 의미없는 ``를 남발하기 마련이다. 이 때 사용하는 것이 바로 React.fragment이다. 사실 fragment를 이미 사용하고 있었는데, fragment의 단축문법은 아래와 같다. defaultProps 프롭스 전달 값이 없는 경우에도 기본값을 넣어주고 싶을 때는 아래와 같이 defaultProps를 이용한다! 컴포넌트 자체의 속성값으로 넣어준다! props.children 태그 안쪽으로 전달한 props를 조회하기 위해 prop

2021년 6월 6일
·
0개의 댓글
·
post-thumbnail

[TIL] React-props

🙊 this.props 모든 . component's의 props 객체는 를 가지고 있는데, prop's 하기 위해서는 라는 표현식을 사용해야 한다. props 정보를 React component에 전달하려면 component의 attribute 속성으로 전달해하는데 해야 한다. this.props는 할 때 사용하는 가장 흔한 방법이다. 🙉 Render a Component's props component에 props 정보를 전달하여 화면에 보이게 하려면 어떻게 해야할까? ① 해당 정보를 받는 class를 찾는다. ② 한다. component의 props는 그 값을 직접적으로 화면에 표현할 때 사용하는 것 외에 어떤 값을 표현하기 위한 조건식

2020년 10월 12일
·
0개의 댓글
·
post-thumbnail

[react] props

JSX 내부에서 props 설정하기 Mycomponent.js 를 수정하여 해당 컴포넌트에서 name이라는 props를 렌더링하도록 설정하자. props 의 값은 컴포넌트 함수의 파라미터로 받아 와서 사용할 수 있다. props 를 랜더링할 때는 JSX 내부에서 {} 로 감싸주어야 한다. 컴포넌트를 사용할 때 Props 값 지정하기 App.js 컴포넌트 props 기본값 설정 : defaultProps Mycompone

2020년 8월 4일
·
0개의 댓글
·