Language/React25 [React] 라이플 사이클 구현 하기 - skipping effect componentDidUpdate(prevProps, prevState){ if (prevState.count == this.state.count){ document.title = `You clicked ${this.state.count} times`; } } class로 구현했을 때 componentDidUpdate가 실행될 때는 props 또는 state가 바뀔 때마다 실행되었습니다. 그 때의 인자로 이전의 props 값과 이전의 state값을 전달하는데 이전의 값과 이후의 값이 변경된 값을 비교해서 다를 때 작업을 처리하면 불필요한 처리를 하지 않음으로써 성능을 더욱 높일 수 있습니다. var numberState = useState(props.initNumber); var number = numb.. 2020. 12. 27. [React] 클래스에서 라이프 사이클 구현하기 라이플 사이클 생명주기 메서드는 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메서드들 입니다. 추가적으로 컴포넌트에서 에러가 났을 때 호출되는 메서드도 있습니다. 어떤 컴포넌트가 마운트(생성되기 전에) 할 일이 있다면 componentWillMount()를 통해서 메서드 안에서 필요한 코드들을 컴포넌트가 생성되기 직전인 렌더함수가 호출되기 전에 해야할 일을 정의할 수 있습니다. 그러고 나서 render 함수가 호출이 되면, Mount가 되어 화면이 그려지고 그 다음에 화면이 그려질 일이 있다면 componentDidMount() 를 컴포넌트를 개발하는 개발자가 구현을 통해서 컴포넌트가 생성된 후 해야할 일을 할 수 있게 해줍니다. 라이프사이클에서는 총 3가지 마운트, 업데이트.. 2020. 12. 26. [React] 함수에서 state 사용법 - hook 클래스에서는 this.setState를 통해 새로운 값을 넘겨줌으로써 state를 업데이트 시키고, state가 업데이트 되면 React의 render 메서드를 호출합니다. function App () { return( Hello World ) } function FuncComp(props){ // 함수형에서는 함수를 호출할 때 첫번째 인자 값으로 전달된 props 값을 전달하도록 약속되어있습니다 var numberState = useState(props.initNumber); var number = numberState[0]; var setNumber = numberState[1]; // var dateState = useState((new Date)).toString()); // var _date =.. 2020. 12. 26. [React] props vs State 컴포넌트를 만드는 쪽에서는 state를 사용해서 내부작업을 할 수 있게되고 컴포넌트를 사용하는 쪽에서는 컴포넌트가 제공하는 props를 통해 내부의 작업을 할 수 있게 됩니다. function FuncComp(props){ // 함수형에서는 함수를 호출할 때 첫번째 인자 값으로 전달된 props 값을 전달하도록 약속되어있습니다 return( function style component Number: {props.initNumber} ) } class ClassComp extends Component{ render(){ return( Class style component Number: {this.props.initNumber} {/* //props를 통해 전달된 값을 class에서 받을 때에는 */} ).. 2020. 12. 25. 이전 1 2 3 4 5 ··· 7 다음
