Lecture/React3 props와 ref를 통한 컴포넌트간 연동 리액트는 화면들을 각각 컴포넌트로 나눠 만들고 그것들을 import 하여 화면을 구성할 수 있다. 각각 화면별로 기능들이 존재하니 메소드나 데이터가 화면별로 존재할거고 하나의 화면에서 보여야하기 때문에 연동되는 것처럼 구현하는 것은 꼭 필요할 것으로 생각된다. 내가 이번에 개발한 방식은 할아버지 컴포넌트 -> 부모컴포넌트 import 부모컴포넌트 -> 자식컴포넌트 import 하여 화면을 구성했다. 그렇다 보니 서로서로 메소드나 데이터를 공유해야하는 상황이 반드시 필요해졌다. 이럴때 내가 확인한 방식이 바로 props와 ref다. 쉽게 설명하자면 props는 내가 할아버지에서 자식컴포넌트까지 원하는 메소드나 데이터를 넘겨주는 것이다. // 이것은 A 컴포넌트입니다. import B from './path.. 2023. 1. 11. setState 객체에 값 넣고 싶을때 개발을 하면서 state에 꼭 하나의 값이 아닌 객체로 잡아야하는 경우가 생긴다. 예를 들어 어떤 주문과 관련된 상태와 로딩창의 오픈 여부를 같은 컴포넌트에서 구현해야 하는 경우 state = { olderInfo: { 주문자: aa, 가격: bb, 등등 }, loadingImg: false } 위와 같이 표현할 수 있겠는데 나도 위와 같이 작성 후 setState로 주문자의 데이터만 바꾸려고 이전에 알고있는대로 시도를 해보니 어떻게 해도 원하는대로 동작을 하지 않았다. 우선 원인으로는 렌더링은 state 값이 변경될 때 되는데 loadingImg와 같은 단순 값은 다른 값이 들어왔을때 변화가 되었다는 것을 바로 알 수 있지만 객체의 경우 해당 주소값을 조회하기 때문에 안의 값이 바뀐다고 하더라도 주소가.. 2023. 1. 11. React 란 무엇인가. React는 자바스크립트 라이브러리중 하나로 ui를 만들기 위해 사용된다. React의 장점으로는 ui를 상태로 관리할 수 있다는 것인데 mvc 모델에서 데이터가 변경되면 컨트롤러에서 해당 데이터를 다시 가공 후 모델에 넣어 뷰에 넣어주는 것과 다르게 그냥 데이터만 변경되면 자동으로 화면에 갱신이 된다. React의 ui 개념은 주로 가상돔 패턴을 말한다. 이를 설명하기 위해 먼저 브라우저의 단계를 살펴보면 1. html코드 파싱, 돔트리 생성 2. css코드로 cssom트리 생성 3. 두 트리 합쳐서 렌더트리 생성 4. 레이아웃 계산 5. 픽셀로 화면에 그려줌 과 같은 단계를 거치는데 이런 과정을 많이 반복하게 되면 당연 부하가 생길 수 밖에 없다. 가상돔패턴은 먼저 가상돔을 만들어 돔과 비교하고 여기.. 2022. 11. 15. 이전 1 다음