개발 일기

일반적으로는 컴포넌트는 부모 컴포넌트가 자식과 상호작용을 할수 있는것은 props가 유일한 수단입니다. 하지만 자식을 수정하려면 새로운 props 전달을 해야하기 때문에 이러한 흐름에서 벗어나 직접적으로 자식을 수정해야하는일이 가끔씩 있을수가 있습니다. 그럴 때 Ref 프로퍼티를 사용으로 해결이 가능합니다 Ref를 사용해야 할때는 아래와 같이 가이드를 하고 있습니다. 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때. 애니메이션을 직접적으로 실행시킬 때. 서드 파티 DOM 라이브러리를 React와 같이 사용할 때. 만약에 선언적으로 해결이 가능할 경우에는 ref 사용을 안하시는것이 좋습니다. Ref는 다음과 같이 React.createRef()을 통해 생성할수 있습니다. 그리고 보통은 컴포넌트가..

생명주기는 컴포넌트의 생성부터 소멸까지의 과정을 컴포넌트 생명주기라고 합니다. 아래에서 해당하는 특정 시점에서 불리는 함수를 작성하도록 하겠습니다. constructor() constructor() 함수는 생성이 될때 한번만 호출이 됩니다. 따라서 상태를 선언하거나 초기화 할때 사용을 합니다. 정의를 할때는 super() 함수를 작성을 가장 먼저 진행을 해야합니다. render() render 함수 같은 경우에는 state가 변경이 되어 UI를 다시 그려야 할때 호출되는 함수입니다. getDerivedStateFromProps(props , state) 이 함수 같은 경우에는 정적 함수입니다. 그래서 static으로 선언을 해야합니다. 당연히 정적함수이기 때문에 this.state을 통해서 접근을 하실수..

React에서는 State를 통해서 상태 관리를 할수가 있습니다. 따라서 아래와 같이 상태를 변경하고 싶을 때 state를 직접 변경하는것이 아닌 setState를 통해서 변경을 해야합니다. import React from 'react' class MainComponent extends React.Component { constructor(props) { super(props) this.state = { time : new Date().getTime() } } clickEvent() { this.setState({ time : new Date().getTime() }) } render() { return ( {this.state.time} ) } } export default MainComponent 주..

프로퍼티는 상위 컴포넌트가 하위 컴포넌트에게 값을 전달할 때 사용합니다. 아래와 같이 속성형태로 값을 전달할수 있는것을 프로퍼티라고 합니다. function App() { return ( ); } 이제 위와 같이 name에 해당하는 값을 아래와 같이 this.props.name으로 값을 참조할수가 있습니다. import React from 'react' class MainComponent extends React.Component { render() { return ( {this.props.name} ) } } export default MainComponent 기억해야하는 내용은 위와같이 상위 컴포넌트에서 하위 컴포넌트로 전달되는 형식입니다. 프로퍼티에서는 다양한 자료형을 모두 사용할수가 있습니다. 위..