# proptypes

dev_seongjoo

propTypes가 무엇인가요? propTypes는 React 컴포넌트에서 사용되는 속성(props)의 유효성을 검사하기 위해 제공되는 기능입니다. propTypes를 사용하면 부모 컴포넌트에서 자식 컴포넌트로 전달되는 속성(props)의 타입을 명시하고, 잘못된 타입의 속성이 전달될 경우 개발자에게 경고 메시지를 표시할 수 있습니다. propTypes를 사용하기 위해서는 prop-types 라이브러리를 설치하고 import해야 합니다. 예를 들어, 아래는 propTypes를 사용하여 name 속성의 타입을 문자열로 지정하는 예시입니다: 위의 예시에서 propTypes 객체를 사용하여 name 속성의 타입을 PropTypes.string으로 지정하였습니다. 이제 MyComponent를 사용하는 부모 컴포넌트에서 name 속성에 문자열이 아닌 다른 타입을 전달하면, 개발자 도구 콘솔에 경고 메시지가 표시될 것입니다.

tmvle22

proptypes를 사용해보기 위해 간단히 불러온다. Prop types는 잘못된 형태의 type을 Property에 전달하는 걸 방지할 수 있도록 type을 체크할 수 있게 해준다. Btn.propTypes에 설정한 것처럼 원하는 형태의 Property types를 지정하고, optional이 아닌 필수로 입력하도록 하고싶다면 .isRequired를 붙인다. App()안에 두 번째 버튼처럼 optional property인 fontSize를 지정하지 않은 경우 Btn컴포넌트에서 default value 를 줄 수 있다. 그럼 fontsize가 지정되지 않은 두번째 버튼에만 적용된다. https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes 문서에서 proptypes 종류를 확인해보자.

ty-yun21

10. Midterm Arrangement (중간정리) 참고용 velog https://velog.io/@ty-yun21/react10 참고용 github https://github.com/ty-yoon21/react-study1 commit message : (2023.02.08) 10. Mitrem Arrangement 목표 Styled Components 정리 Styled Compnents (CSS in JS) : https://www.daleseo.com/react-styled-components/ 1.1 ThemeProvider : https://wonit.tistory.com/366 propTypes : https://velog.io/@eunjin/React-PropTypes-%EC%93%B0%EB%8A%94-%EC%9D%B4%EC%9C%A0-%EB%B0%A9%EB%B2%95 Suspense, La

049494

📌 props : 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법. 필요한 상황 : 재사용할 컴포넌트 만들기 ex) 중복되는 디자인의 여러 버튼 생성(저장 버튼, 삭제 버튼, 수정 버튼 등) 컴포넌트를 하나만 만들고 props를 통해 몇몇 요소만 바꾸어 재사용할 수 있다. 사용 방법 다르게 설정한 property를 컴포넌트의 인자(props)로 넘겨줌.(텍스트, Boolean, 함수 등) props는 유일한 인자로, 받은 값들을 object에 넣어둔다. 받은 값은 props.내가 설정한 key 로 꺼낼 수 있다. props는 자동 실행되지 않기 때문에 직접 return 안에 설정해야 함. 더 좋은 방법은 props 대신 { }로 값을 받는 것.(ES6) props가 오브젝트이기 때문에 이렇게 해도 된다. 기본값도 설정해줄 수 있다. 함수

developer09

#5.0~ 5.1 CRA(CREATE REACT APP) Node.js를 이용해서 create-react-app을 만드는 방법을 공부해 볼거임 create-react-app을 사용한다면 수많은 스트립트들과 많은 사전설정들을 React에서 준비해줌. 일단 Node.js에서 Node.js를 다운받고, 밑에처럼 버전이 확인하면 설치된거임! 이제 npx create-react-app 폴더명 명령어로 React 폴더를 생성해주자! npm start 설치가 완료되면 vs코드로 폴더를 열어줌 터미널을 열어서 npm start라고 명령어를 입력하면 됨 그럼 아래처럼 브라우저 새창으로 development server(개발용

rondido

React 관련 강의 내용을 정리 PropTypes Props의 타입을 확인하기 위한 도구 (like, Flow, Typescript같은 정적 타이핑 도구) 앱이 커짐에 따라 타입 확인을 통해 많은 버그를 잡을 수 있다. PropTypes는 성능상의 이유로 개발 모드에서만 확인될 것 Component.jsx 현재 상태에서 isRequired를 통해 age가 만들어져 있지 않기 때문에 개발자 모드에서 error가 뜬 것을 확인 그리고 age를 넘어줬는데 number타입 아닌 다른 type의 값을 넣어줘도 에러가 발생 그리고 func의 값이 7이 아니면 에러가 발생 그리고 7 뿐만 아니라 다양한 값들을 테스트 할 수 있다. ![](https://velog.velcdn.com/i

nalsae

🔸 React > * prop-types 패키지의 elementType은 무엇을 검사할 수 있는가? > > : React.createElement로 생성한 React Element를 검사할 수 있음 > : 이 때 인수로는 문자열(string), React.elementType, React.Fragment를 전달할 수 있음 > * React에서 자체적으로 수행할 수 있는 PropTypes 검사의 문제점은 무엇인가? > > : props만 검사할 수 있음, 나머지는 별도로 검사할 수 있는 수단이 내장되어 있지 않기 때문에 직접 조건문을 사용하여 유효성 검사를 해야 함 > : 공식 문서에서도 큰 코드 베이스에서의 타입 검사는 propTypes로 부족하다는 언급이 되어 있음 > * prop-types 패키지의 oneOf와 oneOfType 메서드의 차이는 무엇인가? > > : 둘 다 배열을 인수로 전달해야 하는 것은

nalsae

🔸 React > * React로 애니메이션을 구현하기 까다로운 이유는 무엇인가? > > : React는 가상 DOM을 사용하여 렌더링하므로 애니메이션에 친화적이지 않음 > : 대부분의 애니메이션 라이브러리는 실제 DOM에 접근하는 방식으로 구현되어 있기 때문 > : 따라서 React에서 애니메이션을 구현하려면 실제 DOM을 컨트롤하는 Side Effect를 반드시 발생시킬 수밖에 없음 > * React로 이벤트 등록 후 반드시 해야 하는 작업은 무엇인가? > > : 이벤트 해지 작업이 필요함, 만약 이벤트 등록 후 해지하지 않으면 이벤트가 정상적으로 캐치되지 않을 수 있음 > * React에서 이벤트를 해지하는 로직은 어떻게 구현할 수 있는가? > > : 콜백 함수가 참조하는 this 값이 동일해야 하므로 이를 기억할 수 있는 클래스 컴포넌트의 인스턴스 멤버로 정의해야 함 > : 혹은 클로저를 이용하여 해지하는 로직을 반환하여 할

pyounani

3. 컴포넌트 3-1. 컴포넌트 애플리케이션의 사용자 인터페이스를 설계를 할 때 사용자가 볼 수 있는 요소들은 여러 컴포넌트로 구성되어 있다. 컴포넌트는 단순한 템플릿 이상의 기능을 갖추고 있다. 데이터가 주어지면 UI를 구성 라이프사이클 API 이용 컴포넌트가 화면에서 나타났을 때, 사라질 때, 변화가 일어날 때에 작업 수행 지시 가능 임의 메서드 작성하여 기능들을 구현 3-1-1. 함수 컴포넌트 VS 클래스형 컴포넌트 컴포넌트를 선언하는 방식에는 두가지가 있다. 함수 컴포넌트, 클래스형 컴포넌트이다. 함수 컴포넌트(2장에서 봤던 App 컴포넌트가 함수 컴포넌트임) 클래스형 컴포넌트에 비해 선언하기 편리 메모리 자원 적게 사용, 빌드 후 결과물의 파일 용량이 적음 (클래스형 컴포넌트와 큰 차이 없음) state 및 라이프사이클 API 사용 불가능 (리액트 v16.8에서 Hooks 기능 도입되며 해결) **클래스형 컴포넌트

citron03

* PropTypes를 통해서 리액트 개발환경에서 타입을 체크할 수 있다. PropTypes는 React v15.5부터 분리되어 따로 설치가 필요해졌다. > npm i prop-types 타입스크립트를 사용하지않아도 리액트는 타입을 검사하는 방법을 가지고 있는데 이것이 바로 PropTypes이다. propTypes는 성능상의 문제로 개발 모드에서만 작동한다. isRequired를 설정하여 반드시 필요한 데이터도 설정할 수 있다. array, func, bool, object, number, string 등의 타입 검사가 가능하다. PropTypes.any를 통해서 어떤 타입이 와도 검사를 통과하게 할 수 있다. defaultProps를 설정하여 초기값을 설정할 수도 있다. PropTypes.checkPropTypes 메서드를 통해서 수동으로 유효성 검사를 할 수 있다. 🥞 PropTypes를 설정하고 만약 타입에 에러

minsu2344

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

minsu2344

PropTypes를 prop-types에서 import component.propTypes = {} 로 사용(propTypes 소문자 주의) 원하는 props의 타입 설정 가능 isRequired를 이용해 필수요소 설정 가능(꼭 타입 먼저 설정해주고 뒤에 imRequired 붙일 것)

daymoon_

✅ 운영체제 : Windows 11 PropTypes > ❄️ 참고자료 React 공식문서 PropTypes와 함께 하는 타입 검사 NPMJS props-types (원문) DaleSeo PropTypes로 React 입력 타입 체크하기 jistol (React) PropTypes 사용방법과 종류 React props와 비슷한 object의 type을 검사할 수 있는 라이브러리이다. 특정 애플리케이션에서는 전체 애플리케이션의 타입 검사를 위해 Flow 또는 TypeScr

kokoball0

작업하는 프로젝트의 규모가 커질 수록 생각지 못한 곳에서 에러가 발생하는 일이 잦아진다. 이를 방지하기 위한 방법으로, PropTypes를 활용하여 타입(type)을 확인하는 것이 대표적이다. 1. PropTypes가 무엇인가 자바스크립트의 유연한 특성 때문에 작성이 편한 반면, 파일이 많아지면 생산성이 떨어진다는 점 때문에 타입스크립트를 많이 사용하는데, 반드시 자바스크립트를 이용해 앱을 개발해야 하는 상황에서는 이러한 문제점을 피하기 위해 PropTypes를 활용하는 것을 권장한다. PropTypes는 부모로부터 전달받은 prop의 데이터 type을 검사한다. 자식 컴포넌트에서 명시해 놓은 데이터 타입과 부모로부터 넘겨받은 데이터 타입이 일치하지 않으면 콘솔에 에러 경고문이 띄워진다. 간단한 예시를 통해 propTypes의 장점을 알 수 있다. 위의 코드에서 부모에게서 받아온 name이라는 props가 string 형태가 아니라 숫자, 함수 또는 객체 등

drrobot409

React의 PropTypes는 컴포넌트가 받을 Props의 데이터 타입을 미리 지정하고 실제 전달 받은 Prop이 그와 다를 경우 콘솔을 통해 에러를 출력하는 기능을 한다. 별도의 설치가 필요하다. $ npm i prop-types

dnjswn123

propTypes CRA로 설치하기 콘솔창에 npm i prop-types 입력 파일 상단에 import propTypes from "prop-types" 원하는 prop에 propTypes 지정 기존 사용하던 CSS사용의 문제점 CSS파일을 통해 html을 꾸미려할 때, button 이라는 태그에 스타일을 주면 모든 button들에 적용될 때, 즉 전역적인 CSS style을 원치 않는다면, 수많은 코드 속에서 className 겹치지 않게 작명하는 어려움 등등을 해결하기 위해 CRA(Create-React-App) 를 통해 CSS파일을 모듈화할 수 있다. 모듈화란? > 기능별로 분할해 놓는것 예) A를 위한 모듈, B를 위한 모듈이 개별적으로 존재 CSS파일 모듈화하기 Button.module.css 라는 파일 작성 Button.js 에 import하기 (여기서 Button.js

dnjswn123

위와 같이, text 라는 애는 string을, fontSize라는 애는 number를 전달하고 싶은데 실수로 다른 타입의 값을 넣는다면, 잘못 작성한 것이지만 문법상의 오류는 없기 때문에 ReactJS가 캐치하지 못한다. ReactJS가 알아채고 경고문을 띄우게 하기 위해 PropTypes 를 활용할 수 있다. 추가해주고 위와 같은 방법으로 prop의 타입을 지정해준다면 만약 지정한 타입이 아닌 다른 타입으로 입력됐을 경우 콘솔창에 위와 같이 string 으로 expected 되는 Btn의 prop "text"의 타입이 number 이다. 라고 경고문이 뜬다. 마찬가지로 .isRequired 도 있다. 이렇게 작성해주면 text

tank3a

아래 내용은 생활코딩님 강의를 듣고 이해한 내용을 기반으로 작성하였습니다. 컴포넌트 형식 React에서는 다음과 같은 방식으로 컴포넌트를 정의합니다. 위의 코드는 정확히 말하자면 html도, javascript도 아닙니다. React를 만든 페이스북이 개발한 jsx라는 구문 확장 문법입니다. 컴포넌트의 첫 글자는 대문자이어야 하는데, 이를 소문자로 한다면 React는 컴포넌트를 HTML태그로 착각할 가능성이 높기 때문입니다. 위와 같이 정의한다면 create-react-app에서 만든 App클래스에서 컴포넌트들을 보기쉽게 사용할 수 있습니다. Props React 공식 문서에서는 props(properties, 특징)를 Arbitrary Input이라고 말합니다. 위의 코드들을 props를 이용하도록 변형시켜 보자면 즉, html의 속성처럼 컴포넌트를 사용할 때 props로 무언가를 정의해준다면 해당 컴포넌트에서 `this.

natural_min

PropTypes CDN 설치 코드가 많아지고 그에 따른 props가 많아진다면, props의 type에 따른 버그가 생길 수 있다. 이 버그는 syntax error에 들어가지 않아서 console창에 뜨지 않기 때문에 PropTypes를 설치하여 console창에 검사를 할 수 있도록 만들어보자. 잘 설치됬는지 확인하기 위해 console창에서 PropTypes를 쳐본다. 위와 같이 잘 나온다면, 설치가 잘된 것이다. string, number type 검사 검사하고자 하는 속성의 검사기준을 코드로 짜본다

daekyeong

1. state ✔ state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다. 즉, props를 바꾸려면 부모 컴포넌트에서 바꿔야 한다. > 리액트에는 state도 두 가지 종류가 있다. 클래스형 컴포넌트가 지니고 있는 state 함수형 컴포넌트에서 useState라는 함수를 통해 사용하는 state 1.1 클래스형 컴포넌트의 state src/Counter.js 파일을 생성하여 다음과 같이 코드를 작성했다. 위의 코드 처럼 컴포넌트에 state를 설정할 때는 constructor 메소드를 사용한다. 또한, 클래스형 컴포넌트에서 constructor를 사용할 때는 반드시 super(props)를 호출