리액트 기초/라이프사이클 + State 관리

단방향 데이터 흐름, setState()

단방향 데이터 흐름 데이터는 위에서 아래로, 즉, 부모 컴포넌트에서 자식 컴포넌트로 넘어간다. 부모 컴포넌트의 state가 업데이트 되면 자식 컴포넌트도 리렌더링이 일어난다. 만약 자식 컴포넌트가 부모 컴포넌트의 state를 고칠 수 있다고 가정하면, 부모 컴포넌트는 state가 변했으니 렌더링이 일어나고 부모가 렌더링이 일어나면 자식도 렌더링이 일어난다. 이 과정이 반복되면 무한 루프에 빠져버려 노답이된다. 이런 경우가 생기지 않게 하기 위해서 무조건 데이터는 단방향으로 흐르는 것을 알아야 하고 부모만 자식을 변경해야 한다! 왜 setState() 함수를 사용할까? 예를 들어 어떤 리액트 요소를 클릭했을 때, 컴포넌트의 state 값이 변경되도록 하려고 아래처럼 이벤트를 포함하는 코드를 작성했다고 하자..

createRef()

React.createRef() 클래스형 컴포넌트에서 돔 요소를 가져오는 방법이다. componentDidMount()나 componentDidUpdate() 를 사용해서 DOM 요소에 접근할 수 있지만, Ref를 사용하면 더 리액트스럽게 DOM 요소를 가져올 수 있다. Ref를 이용해서 리액트 요소를 가져온다. 리액트 요소는 가상돔을 만들고 그 다음에 돔에 올라간다. 돔에 올라가기 전에는 아무리 자바스크립트를 이용해Document.getElementById와 같은 것을 사용해서 태그를 가지고 오려해도 돔이 아직 안그려졌으면 아무것도 가지고 올 수 없다. 리액트 요소에서 가지고오면 값이 없지는 않을 것이다! createRef 사용법 Ref는 React.createRef()를 통해 생성되고 ref 어트리뷰..

컴포넌트 라이프사이클

가상돔 DOM이란? https://duckgugong.tistory.com/181 DOM 트리 중 하나가 수정될 때마다 모든 DOM을 뒤지고, 수정할 것을 찾고, 모두 수정한다면 필요없는 연산이 너무 많이 일어나기 때문에 등장한 것이 가상돔이다. 가상돔은 메모리 상에서 돌아가는 가짜 DOM이다. 가상돔의 동작 방식 기존 DOM과 어떤 행동 후 새로 그려진 DOM(가상 돔)을 비교해서 바뀐 부분말 갈아끼워준다. 가상돔은 DOM보다 무조건 빠르다고 할 수 없다. DOM은 사이트 구조에 따라 가상돔을 쓰는 것이 훨씬 성능이 좋을 수 있고, 느릴 수도 있다. 컴포넌트 라이프 사이클 컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지가 라이프 사이클이다. 아래는 덜 일반적인 라이프 사이클이다. 위의 ..