728x90 300x250 SMALL Front-end/React65 JSX문법과 일반 함수 return 차이 JSX문법에서의 return과 일반 함수에서의 return은 약간 차이가 있다. JSX 문법에서의 return : JSX는 React 컴포넌트가 화면에 렌더링할 내용을 반환한다. 이 때 괄호 안에 JSX 요소를 반환하는 것은 유효한 문법이다.일반 함수에서의 return : 일반 함수에서는 데이터를 반환할 때 반드시 명시적인 값(배열, 객체, 문자열 등)을 반환해야 하며, 괄호로 묶는다고 해서 여러 값을 자동으로 패키징 하지 않는다. 일반 JavaScript 함수 예시const useCounter = () => { const count = 0; const increaseCount = () => console.log("Increase"); const decreaseCount = () => c.. 2024. 12. 15. 리액트에서 화살표 함수가 자주 쓰이는 이유는? 리액트에서는 화살표 함수와 일반 함수를 모두 사용할 수있지만, 화살표 함수가 자주 사용되는 이유는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. 이전 1 ··· 4 5 6 7 8 9 10 ··· 17 다음 728x90 반응형 LIST