728x90 300x250 SMALL Front-end312 리액트에서 화살표 함수가 자주 쓰이는 이유는? 리액트에서는 화살표 함수와 일반 함수를 모두 사용할 수있지만, 화살표 함수가 자주 사용되는 이유는React의 특성과 관련이 있다. 1. this의 컨텍스트 문제 해결화살표 함수는 상위 스코프의 this를 그대로 사용하기 때문에 클래스 컨포넌트에서 콜백 함수로 사용할 때 유용하다.예를 들어, 일반 함수는 this가 변경될 수 있으므로 추가 적인 .bind(this) 작업이 필요하다class MyComponent extends React.Component { constructor() { super(); this.handleClick = this.handleClick.bind(this); // 꼭 필요함 } handleClick() { console.log(this); // 'this'가.. 2024. 12. 14. 리액트에서 "함수형 업데이트"를 사용하는 이유 () => React에서는 상태 값을 직접 수정하지 않고, 항상 "함수"를 통해 새로운 값을 계산하도록 권장한다. 함수형 업데이트는 이런 철학을 따른다. 1. 상태를 기존 값 기반으로 안전하게 계산하기 위해2. React의 비동기적 상태 업데이트 특성을 안정적으로 처리하기 위해 함수형 업데이트 사용 예시const [count, setCount] = useState(0);// 함수형 업데이트 사용setCount((prevCount) => prevCount + 1); 함수형 업데이트를 사용하는 이유 보통 React의 상태 업데이트는 아래와 같이 단순한 값을 넘겨주는데setCount(count + 1); 이때, count는 현재 컴포넌트 렌더링에서 고정된 값이다.하지만 React의 상태는 비동기적으로 작동하기 때문에 .. 2024. 12. 13. 훅을 사용한 컴포넌트 - 비공개 보호되어 있는 글 입니다. 2024. 12. 12. 훅 사이에 데이터 공유하기 훅의 각 호출은 상태와 동작이 독립적이며 서로 간섭하지 않는다.그렇다면 훅 사이에서 데이터를 공유하려면 어떻게 해야 할까? 훅 사이에서 데이터를 공유 하는 방법은 몇가지가 있는데 주로 다음과 같은 방식이 있다.상태(state)를 공유하는 방식 : 동일한 상태를 여러 컴포넌트에서 사용할 수 있도록 설정(예 : Context API, Redux 등)상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달 : props를 통해 부모에서 자식으로 전달.이를 바탕으로 상태공유와 전역 상태 관리에 대해서 알아보자. 1. 상위 컴포넌트에서 하위 컴포넌트로 상태 전달(Props 사용)React에서 가장 기본적인 데이터 공유 방법은 부모 컴포넌트가 상태(state)를 관리하고, 이를 props로 자식 컴포넌트에 전달하는 것이다... 2024. 12. 11. 이전 1 ··· 9 10 11 12 13 14 15 ··· 78 다음 728x90 반응형 LIST