개발

JSX 내부에서 배열에서 바로 원하는 JSX를 반환하는 특성으로 인해 map, filter, reduce 이 3개의 메서드가 가장 자주 사용되며, 기존 배열의 값을 유지하며 새로운 값을 생성하기 때문에 안전하게 사용이 가능.map: 인수로 전달 받은 배열과 동일한 길이의 새로운 배열을 반환하는 메서드. 리액트에서는 특정 배열을 기반으로 요소를 반환할 때 자주 사용.const arr = [0 ,1 ,2 ,3 ,4]const doubleArr = arr.map((item) => item * 2) // [0, 2, 4, 6, 8]/* React Ex */const Elements = arr.map((item) => { return {items}}) filter: 콜백 함수를 인수로 받으며 truthy한 경우만..

Front-End/React 2024. 9. 26. 13:25

더보기 - 일반함수와 화살표 함수의 차이점: 2024.04.07 - [Front-End/Javascript] - 함수를 정의하는 방법 - 4. 화살표 함수(Arrow Function) /* 클래스 컴포넌트에서 일반함수, 화살표 함수로 state 갱신 예제 */ class Component extends React.Component { constructor(props) { super(props) this.state = { counter: 0, } } functionCountUp() { console.log(this) // undefined this.setState((prevState) => ({counter: prevState.counter + 1})) } arrowFunctionCountUp = () =..

Front-End/React 2024. 4. 21. 14:14

1. ReactJS는 정확히 무엇이고 왜 사용해야 할까? 사용자 interfaces 구축을 위한 JS library. 클라이언트 측 JS로 방문자의 브라우저에서 실행되는 JS 코드로 로딩된 이후의 웹페이지를 조작할 수 있다. 그러면 웹사이트에서 다양한 상호 작용을 할 수 있는 사용자 인터페이스를 구축할 수 있어. 예를 들어 Netfilx가 있어 새로고침 버튼을 사용할 필요가 없으니 새 HTML 페이지를 생성하도록 기다릴 필요가 없어. 그 이유는 JS 덕분으로 우리가 작업하는 동안 해당화면에 보이는 내용인 DOM을 업데이트 해주거든. 그리고 모바일 앱에서 볼 수 있듯 UI를 통해서 훌륭한 사용자 경험을 제공해. 기존에는 JS에서 명령형 접근 방식으로 element를 생성하고 해당 element에 이벤트를 ..

Front-End/React 2023. 11. 30. 16:48