본문 바로가기

React10

[TIL] (22.08.10.) React 버튼 onClick 이벤트 처리 상황 리액트 프로젝트에서 비슷한 기능을 수행하는 두 개의 버튼을 만들었다. 해당 버튼들에 onClick 이벤트로 모달창을 띄우도록 isModalOpen 값을 변경해주는 함수를 적용하고자 한다. 그리고 클릭한 버튼이 무엇인지에 따라 Modal 컴포넌트에 다른 children 을 주어 Modal 내에 다른 내용이 띄워지도록 처리하고 싶었다. 기존 코드는 이런 식이었다. 고민지점 문제는 특정한 버튼을 클릭할 때, 이 버튼이 어떤 버튼인지에 따라 Modal 의 children 에 들어가야 하는 값이 달라져야 하는데, 그걸 어떻게 해야할지 모르겠다는 점이다. 적용 일단은 하드코딩 느낌이 있지만, 버튼 별로 띄워주고자 하는 Modal 이 다른 거라고 생각했고, 각 버튼에 변경해줘야 하는 모달 상태를 따로 설정하고,.. 2022. 8. 10.
[React] 클래스형 컴포넌트와 함수형 컴포넌트 클래스형 컴포넌트와 함수형 컴포넌트 (Feat. 클래스형만 파본다...) 컴포넌트는 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 기능을 하는 것은 물론, 라이프 사이클 API를 통해 컴포넌트가 화면에 나타날 때, 사라질 때, 변할 때 작업들을 수행할 수도 있습니다. 컴포넌트의 목적에 따라 프리젠테이션(presentational) 컴포넌트와 컨테이너(container) 컴포넌트로 나누기도 합니다. 리액트를 사용하여 프론트 개발을 할 때 클래스형, 함수형 두 가지 방법으로 컴포넌트를 선언할 수가 있습니다. 과거엔 클래스형 컴포넌트를 주로 사용했지만, 2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅(hook)을 지원해 주어서 현재는 공식 문서에서 함수형 컴포넌트와 훅을 함께 사용할 것을 권장하.. 2022. 7. 26.
[항해99 63일차] (22.05.08) WIL_실전 프로젝트 2주차 종료. 매일 작업 기록 5/2(월) 마이페이지 분기 마이페이지 : 게시물 삭제하기 버튼 API 연동 chatList : 채팅리스트 불러오기 API 연동 chatDetail: socket 연결, 구독, 채팅 보내기 연결 성공 5/3(화) 프로젝트 노션 정리 소셜로그인 API 확인 및 response 값 처리 요청 (Login) 닉네임 설정 여부에 따라 페이지 이동 다르게 처리 완료 (signup 또는 select로) (signup) 닉네임 필수값으로 설정. 중복닉네임 아닐 시에만 닉네임 저장 버튼 활성화 처리 (Mypage / ChatList ) isLoading 세팅(useEffect 관련) (ChatList) 뷰 보완 : 채팅방 나가기 버튼 추가, (ChatDetail) 데이터 처리 방법 결정: state 에.. 2022. 5. 8.
[항해99 58일차] (22.05.03) TIL_실전 프로젝트 2주차. 요즘 매일매일 프로젝트 진행사항을 팀 내 공유 노션에 정리하고 있는데, 이것을 블로그에도 정리해두면 좋겠다는 생각이 들어 남겨둔다. 5/3(화) 목표 1. ChatDetail.js 이전 메시지 불러오는 API는 있음. 서로가 입력한 새로운 메시지를 어떻게 처리할 것인가? 이 부분에 대한 고민 필요. (리덕스 툴킷? 다른 방법?) (과제) 데이터 처리 방법 결정! 2. Mypage / MyTempPage / ChatList / ChatDetail 페이지 첫 렌더링 시 useEffect 가 렌더링 이후에 실행되면서, list 를 렌더링 이후에 가져오게 됨. → 그로 인해 렌더링되는 return 안에 있는 map 함수가 제대로 실행되지 않는 오류 발생.이것이 최선의 방법은 아닐 것으로 보이는데, 어떻게 처리해.. 2022. 5. 3.
[항해99 56일차] (22.05.01) WIL_실전 프로젝트 1주차 종료 실전프로젝트 1주차가 종료되었다. 실전프로젝트는 S.A. 에 매일의 작업 기록, 리뷰, troubleshooting 을 적고 있다. 리뷰 1. 프로젝트 세팅 이번 프로젝트 세팅은 React로 서버사이드 렌더링을 하기 위해 Next.JS를 사용하기로 했다. Next.js 를 사용하는 과정에서 일단 기본적인 개념을 이해해야 했다. 사용하면서 소소하고 다양한 어려움을 겪었는데.. 기술 검토를 해보면서, SSR 을 하고 싶다고 치더라도 React 18버전 에서 SSR 을 지원하는데, 굳이 Next.js 를 쓸 필요가 없다는 결론에 도달하였다. 그래서 다시 결론은 CRA 를 사용하여 프로젝트를 생성. 2. 라우팅 useHistory Hooks 를 사용하지 않고 navigate 를 사용했다. troubleshoot.. 2022. 5. 1.
[항해99 50일차] (22.04.25) 클론 프로젝트 종료, 실전 프로젝트 시작 클론 프로젝트 회고 ○ 스코프 대부분 구현 완료 기능 구현 완료 : 회원가입, 로그인, 로그아웃, 게시글 CRUD, 좋아요 및 관심상품 담기, 검색어 및 카테고리 검색 기능 구현 미완료 : 무한 스크롤 , 소셜 로그인 ○ Trouble Shooting 1. useEffect 실행 컨트롤이 너무 어렵다. 메인 페이지에서 axios, getpost 를 실행하여 포스트리스트를 받아오는 상황이 있었다. useEffect 는 컴포넌트가 렌더된 이후 실행되는 hook 이기 때문에, useEffect 에 getpost를 넣어두면, getpost가 실행되기 전에 state 값이 불러와지고, render 가 진행되어 state 값이 undefined 가 출력되고. 페이지에 오류가 발생하게 된다. 웹 애플리케이션에서 서버.. 2022. 4. 25.
[항해99 42일차] (22.04.17) WIL_미니 프로젝트 종료, 클론 코딩 시작 미니 프로젝트 회고 1. 백엔드 분들과 처음으로 진행한 협업 프로젝트 - API 설계.. 멘붕이었다. 뭘 요청해야 하고, 우리는 뭘 보내줘야 하는건지. 도무지 아무것도 이해되지 않는 상황에서 논의를 시작해야했고, 설계서를 제출해야 했다. 프로젝트 중반으로 와서 첫 API 통신을 성공하자, 드디어 이 과정이 어떻게 진행되는 건지 조금씩 이해되기 시작했다. - API 테스트를 빠르게 시작해보지 못한 점이 아쉽다. 짧은 기간의 프로젝트에서 성공적인 프로젝트 수행을 위해서는, 백엔드-프론트 모두 효율적인 시간 활용이 중요한 것 같다. 이를 위해서는 백-프론트 우선 설계한 API 를 만들어, 제대로 통신하는지를 빠르게 확인해보고, 통신이 원활하지 않을 시 각 포지션에서 원인을 찾아보는 작업이 진행되어야 한다. -.. 2022. 4. 17.
[항해99 35일차] (22.04.10) WIL_주특기 심화 마감, 미니 프로젝트 시작 Week Record 1. 주특기 심화(W5) 마감 항해99 32일차(22.04.07) 항해 주특기 3주차 중 가장 어려웠다. 멘붕이 정말 많이 왔고, 아직 정신을 차리지 못한 상태이다. 그럼에도 잘한 점은 어떻게든 과제를 제출했다는 것이다. 마지막 날에 결국 샘플 페이지의 소스코드를 확인하였지만, 어쨌든 요구사항으로 있던 대부분의 기능들을 구현하여 제출했다. (기한을 지켜 요구사항을 최대한 수행하는 것은 중요하다.) 사실 데이터 흐름에 대해 완전히 숙달된 상태는 아니라, 개념이 드문드문 머릿속에 들어있는 기분이다. 그래도 해냈다는 것에 의의를 둔다. 각 기능 구현을 위한 업무 흐름을 머릿속에 숙지할 수 있도록 필기, 암기, 반복 작업을 더 해야겠다. 2. 미니 프로젝트(W6) 시작 항해99 33일차(2.. 2022. 4. 10.
[항해99 28일차] (22.04.03) WIL_주특기 숙련 마감, 주특기 심화 시작 항해99는 매주 일요일을 일주일 중 유일한 휴일로 두고 있다. 그렇지만 마냥 쉬는 건 아니고... WIL 을 작성하며 1주 간 공부한 것을 회고하도록 한다. 4월 1주 WIL (Weekly I Learned) 를 정리해본다. 이번 주 이해한 것 React 개념 [알고가기] 가상돔이란? DOM은 html 단위 하나하나를 객체로 생각하는 모델. 예를 들면 'div'라는 객체는 텍스트 노드, 자식 노드 등등 하위의 어떤 값을 가지고 있음. 이런 구조를 트리 구조라고 함. 가상돔은 메모리 상에서 돌아가는 가짜 DOM 가상돔의 동작 방식 : 기존 DOM과 어떤 핸동 후 새로 그린 DOM(가상돔에 올라갔다고 표현함)을 비교해서 정말 바뀐 부분만 갈아끼워 넣어줌. DOM 을 새로 그리는 경우 - 처음 페이지 진입 시.. 2022. 4. 3.

티스토리툴바