일반적으로 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 `props`를 사용해서 전달한다. 하지만 깊이가 깊어질 수록 prop drilling이 발생한다. 쉽게 말해 드릴로 뚫어버리듯 prop의 전달이 너무 깊어진다는 의미이다. 아래 발로 만든 구조를 보자. 대충 저런 구조에서 더 타고 내려가면 어떤 문제가 발생할까? 사실 아무런 문제도 발생하지 않는다. 물론 컴퓨터가 해석 할 때 아무 문제가 생기지 않는다는 것이고, 사람이 인지하는데는 어려움이 발생할 수 있다. 문제점깊이가 깊어질수록 어떤 컴포넌트로부터 props가 내려왔는지 파악이 어렵다. 특정 컴포넌트에서 오류가 발생할 경우 디버깅이 어려워진다. prop drilling의 예시 코드를 작성해보고 후에 context를 사용해서 리팩토링..
💡값이 변경될 때 리-렌더링useState와 useRef의 가장 큰 차이는 값이 변경될 때 렌더링의 발생 유무이다. State는 값이 변경될 때마다 리렌더링이 되지만 Ref는 리렌더링이 되지 않는다. Ref는 리렌더링이 될 때 변경된 값을 확인할 수 있다. 따라서 컴포넌트에 엄청 자주 변경되는 값이 있을 때, 그 값에 의해 리렌더링될 필요는 없을 때 사용하면 좋다. 일반 변수와도 닮은 것 같지만 리렌더링이 될 때 컴포넌트 자체가 다시 호출되게 되고 이 때 일반 변수는 값이 다시 초기화 되지만 Ref는 컴포넌트의 전생애주기(마운트 ~ 언마운트)를 통해 유지되기 때문에 컴포넌트가 리렌더링 되어도 값을 유지한다. 💡 DOM 요소에 접근할 때자바스크립트에서 id나 class등으로 DOM 요소에 접근하는..
리액트는 자식 컴포넌트에 값을 전달할 때 props라는 녀석으로 전달하게 된다. props는 전달한 인자를 통으로 묶은 객체 형태로 전달이 된다. 예시 코드// 부모// 자식const 자식 = (props) => { console.log(props) // 출력: {name: '길동', age: 30}}객체로 전달한 적이 없으나 props라는 객체 안에 내가 전달한 변수들이 들어있는것을 확인할 수 있다. 💡 객체를 하위 컴포넌트로 전달위 처럼 간단한 데이터를 보내는게 아니고 객체를 보내야 한다면 아래와 같은 구조로 props를 받아올 것이다. obj = {name:'길동', age: 30}const 자식 = (props) => { const name = props.obj.name; const ag..