![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FuKDkV%2FbtsdKqdeDOl%2FwSJkhhKUnMBna9Ktz68x80%2Fimg.jpg)
React에서 map()함수 사용시 return 문의 필요성
2023. 5. 3. 10:34
개발이야기/React.js
리액트에서 JSX 코드의 반복 요소를 수정할 때, map()함수를 자주 사용합니다. map() 함수를 사용하여 반복되는 JSX요소를 반환하는 경우가 많이 발생합니다. return 키워드를 사용하여 반환하는 방식과, 간결한 화살표 함수의 단축 구문을 사용하는 방식 두 가지가 있습니다. 결과적으로는 동일한 결과물입니다. 하지만 조금 다른 차이점이 있습니다. 1. return을 사용할때 - return 키워드를 사용하는 경우, 명시적으로 return 문을 사용하여 생성된 각 JSX 요소를 새 배열에 저장하고, 이 배열은 나중에 렌더링될 수 있도록 합니다. function NumberList({ numbers }) { return ( {numbers.map((number) => { return {number};..
![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbeCady%2FbtscZSOX5f8%2Fsf6kX4wukcfEudzwajIkCk%2Fimg.jpg)
React에서 useEffect를 활용한 상태 값 변화 확인 방법
2023. 4. 27. 16:01
개발이야기/React.js
리액트에서는 useEffect 훅을 활용하여 상태 값이 변화할 때마다 특정한 동작을 수행할 수 있습니다. 이번 포스트에서는 useEffect 훅을 사용하여 상태 값이 변할 때마다 console.log를 통해 값의 변화를 확인하는 방법에 대해 알아보겠습니다. 리액트에서 useState 훅을 사용하여 상태 값을 변경할 때마다 useEffect 훅으로 값을 확인하고 싶을 때가 있습니다. 그런데 의존성 배열을 비워놓으면 콘솔에 값이 출력되지 않습니다. 그렇다면, 어떻게 의존성 배열을 설정하면 좋을까요? 의존성 배열에 상태 값 자체를 넣는 것은 무한 렌더링을 발생시키므로 올바르지 않습니다. 대신, useEffect 함수 내부에서 상태 값을 참조하도록 코드를 작성해야 합니다. 예시 코드📌 const [count, ..
![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fl01x5%2Fbtr42yr6du5%2FcZy4n3MhyxgJnuPoC4wc21%2Fimg.jpg)
탭 버튼 컴포넌트 만들기: 확장성과 API 연동을 고려한 React 예제
2023. 3. 21. 15:09
개발이야기/React.js
확장성 높은 tabButton을 만들어보자. 조건 1. firstButton과 secondButton을 누르면 각각에 알맞은 데이터가 보여져야한다. 2. thirdbutton, fourth button 등이 추가 될 가능성을 고려해서 만들어야한다. 구현 방법 1. 변경되는 탭 모드를 저장할 state를 만들어준다. 2. 각 탭 버튼에 고유한 값을 할당하고, 해당 값을 이벤트 핸들러에 전달한다. 3. 이벤트 핸들러에서 전달받은 값에 따라 현재 활성화된 탭을 업데이트한다. 4. 활성화된 탭에 따라 적절한 데이터를 렌더링한다. 1. 부모컴포넌트에 탭 모드를 저장할 state와 탭 모드 변경시 실행되는 함수를 만들어준다. 부모컴포넌트.tsx //탭모드를 저장한 state/ 초기값은 firstBtn으로 설정 co..
![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbE5xw7%2FbtrFzxxapnP%2FnMKBuUkjKLQE7I6sOt5sek%2Fimg.jpg)
[React] 하위 Route 만들기
2022. 6. 23. 15:03
개발이야기/React.js
path가 길어지고 복잡해지면 하나의 Routes 안에서 다루기가 복잡해진다. 그래서 리액터 라우터안에서는 라우터를 중첩해서 사용할 수 있게 해준다. 이렇게 Route로 같은 path를 가지고있는 컴포넌트끼리 (route로) 감싸준다. path프롭으로 path="qustions"을 지정해준고, 안에있는 라우터들은 qustions을 지워준다. 이때 index에 해당하는 라우트에는 index값을 지정해주면 된다. 👇🏻
![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcrXYLf%2FbtrFya3tQFB%2F2NpvErZHGNmXaZ0AGaQmN1%2Fimg.jpg)
[React] Router
2022. 6. 23. 14:47
개발이야기/React.js
Router란? 리액트 컴포넌트로 페이지를 나누고 이동하게 해주는 라이브러리이다. 우리가 리액트를 사용하다보면 router, routes, route, link 이렇게 네가지 컴포넌트가 있는걸 볼 수 있었다. 그럼 각각 어떤 역할을 하는지 알아보자. Router 라우터는 리액트 라우터에서 사용하는 데이터들을 모두 가지고 있는 컴포넌트다. (현재주소나, 페이지기록을 가지고 있음) 이게 없으면 리액트 라우터를 쓸 수 없다.(중요!!) 그래서 리액트 라우터에서 제공하는 기능을 사용하려면 반드시 라우터컴포넌트 안에서 사용해야한다. 보통은 최상위 컴포넌트로 감싸고 사용하는데 이렇게하면 프로젝트 전체에서 리액트 라우터를 쓸 수 있기때문이다. 📌예시 import { BrowserRoute } from "react-r..