프로그래밍 공부 노트

Ref Class Component 에서 Ref 는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공한다. Ref 활용 - 포커스, 텍스트 선택영역, 미디어의 재생관리 - 애니메이션을 직접적으로 실행시킬 때 - 서드 파티 DOM 라이브러리를 React와 같이 사용할 때 아래의 예제 코드를 보자 import React , { Component } from 'react' export default class Click extends Component { state = { like : 0 , } handleIncrease = () => { this . setState ( prevState => ({ like : prevState . like + 1 })) } handleDecreasse = () => { this . setState (( prevState ) => ({ like : prevState . like - 1 })) } accessDom = ( tag ) => { console . log ( tag ); } render () { console . log ( '렌더링 되었다' ); const { like } = this . state ; return ( < div > { like } < div > < button ref = {this . accessDom } onC

props 기본값 설정하기 상위 컴포넌트로부터 하위 컴포넌트에 props로 값이 전달되지 않은경우 기본적으로 보여질 값을 설정할 수 있다. 위와같이 static defaultProps에 기본값을 설정하면 상위컴포넌트에서 하위컴포넌트로 값이 전달되지 못할때 기본props 값으로 설정된 '기본이름'이 값으로 입력되어 아래와같이 출력된다. 한가지 방법이 더 있는데 결과값은 똑같고 표현방법만 살작다르고 똑같이 동작하는 코드이다. 👇🏼👇🏼👇🏼   두가지 방법중에 최신방법은 맨위에 처음 작성한 static defaultProps 방법이므로 되도록 최신방법을 사용하자. 위 두가지 방법은 class형 컴포넌트에서 사용되는 방법이고 함수형 컴포넌트에서는 default parameter를 통해 기본 값을 설정할 수 있다. 만약에 props로 전달되는 값이 없다면 이와같이 default parameter로 값을 지정해줄 수 있다. 이렇게 작성한경우 props로 값이 전달되지 않은경우 아래와 같은 결과가 나오게된다.   위 결과는 props로 name, age둘다 값이 전달되지 않아 기본값으로 반환한 결과이며 props중 age값만 9999로 전달할 경우  안녕하세요 제 나이는  9999 살이며 이름은  안녕하세요  입니다. 라는 결과 값을 반환한다.