# proptypes
10. Midterm Arrangement 중간정리
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 Compon...
# Props
props : 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법. 필요한 상황 : 중복되는 디자인의 여러 버튼 생성(저장 버튼, 삭제 버튼, 수정 버튼 등) -> 컴포넌트를 하나만 만들어서 재사용하고 텍스트를 다르게 활용. 다르게 설정한 pro
[React]PropTypes
React 관련 강의 내용을 정리PropTypesProps의 타입을 확인하기 위한 도구(like, Flow, Typescript같은 정적 타이핑 도구)앱이 커짐에 따라 타입 확인을 통해 많은 버그를 잡을 수 있다.PropTypes는 성능상의 이유로 개발 모드에서만 확인
[리액트] 3. 컴포넌트 (1)
3. 컴포넌트 3-1. 컴포넌트 애플리케이션의 사용자 인터페이스를 설계를 할 때 사용자가 볼 수 있는 요소들은 여러 컴포넌트로 구성되어 있다. 컴포넌트는 단순한 템플릿 이상의 기능을 갖추고 있다. 데이터가 주어지면 UI를 구성 라이프사이클 API 이용 컴포넌트가 화면
[리액트를 다루는 기술] 클래스형 컴포넌트로 변환하기(defaultProps & propTypes)
import {Component} from 'react' 추가클래스 이름 옆 extneds Component 추가defaultProps & propTypes는 외부에 선언할도 있고 static을 사용해 내부에 선언할 수도 있음render() 안에서 함수형 컴포넌트와 같
[리액트를 다루는 기술] PropTypes로 props 타입과 필수 관리
PropTypes를 prop-types에서 importcomponent.propTypes = {} 로 사용(propTypes 소문자 주의)원하는 props의 타입 설정 가능isRequired를 이용해 필수요소 설정 가능(꼭 타입 먼저 설정해주고 뒤에 imRequired
[React] PropTypes를 이용한 타입 검사
작업하는 프로젝트의 규모가 커질 수록 생각지 못한 곳에서 에러가 발생하는 일이 잦아진다. 이를 방지하기 위한 방법으로, PropTypes를 활용하여 타입(type)을 확인하는 것이 대표적이다.자바스크립트의 유연한 특성 때문에 작성이 편한 반면, 파일이 많아지면 생산성이
React PropTypes
React의 PropTypes는 컴포넌트가 받을 Props의 데이터 타입을 미리 지정하고 실제 전달 받은 Prop이 그와 다를 경우 콘솔을 통해 에러를 출력하는 기능을 한다.
CRA를통해 propTypes 설치, CSS모듈화하기
콘솔창에 npm i prop-types 입력파일 상단에 import propTypes from "prop-types"원하는 prop에 propTypes 지정CSS파일을 통해 html을 꾸미려할 때, button 이라는 태그에 스타일을 주면 모든 button들에 적용될
Props의 type 알기
위와 같이, text 라는 애는 string을, fontSize라는 애는 number를 전달하고 싶은데 실수로 다른 타입의 값을 넣는다면, 잘못 작성한 것이지만 문법상의 오류는 없기 때문에 ReactJS가 캐치하지 못한다.ReactJS가 알아채고 경고문을 띄우게 하기
[react] PropTypes 타입검사
코드가 많아지고 그에 따른 props가 많아진다면,props의 type에 따른 버그가 생길 수 있다.이 버그는 syntax error에 들어가지 않아서 console창에 뜨지 않기 때문에PropTypes를 설치하여 console창에 검사를 할 수 있도록 만들어보자.잘
[React] 4. state, props
1. state ✔ state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다. 즉, props를 바꾸려면 부모 컴포넌트에서
[react] 노마드코더 영화웹서비스 제작 2.4 PropTypes로 점검하기
우리는 father componant로 부터 받은 prop가 우리가 예상한 props인지를 항상 점검할 필요가 있다. 이것을 우리에게 알려주는 것이 prop-types다. 를 터미널에 명령해 설치한다. 설치가 잘 되었는지 확인하려면 package.json ➡️ depe
REACT 기초 : propTypes
npm install prop-typesprop-types 패키지를 설치한다Basic.propTypes = { name: PropTypes.string.isRequired, birth: PropTypes.number.isRequired, lang: PropType
[TIL] React PropTypes.shape 사용법
참고: https://stackoverflow.com/questions/32325912/react-proptype-array-with-shape#32327205 https://www.daleseo.com/react-prop-types/#%EB%B3%B5%EC%9E%A1%ED%95%9C-%ED%83%80%EC%9E%85-%EC%A0%95%EC%9D%98
[TIL] React 의 Children PropTypes 설정
니꼬 강의를 듣다가 적어둔다.출처: https://nomadcoders.co/react-for-beginners/lectures/521https://github.com/yannickcr/eslint-plugin-react/issues/7
[React] PropTypes 쓰는 이유, 방법
작업하는 프로젝트의 규모가 커질 수록 생각지 못한 곳에서 에러가 발생하는 일이 잦아진다. 이를 방지하기 위한 방법으로, PropTypes를 활용하여 타입(type)을 확인하는 것이 대표적이다.