리액트 팬레터 홈페이지 만들기: 3단계. Redux 리팩토링

0. 2단계 context으로 생성한 홈페이지 리액트 팬레터 홈페이지 만들기: 2단계. contextAPI로 리팩토링 0. 1단계 props-drilling으로 생성한 홈페이지 리액트 팬레터 홈페이지 만들기: 1단계. props-drilling 만들기 완료. 1. 필수 요구 사항 styled-components 를 이용하여 스타일링 전역 스타일에 reset.css 를 적용해 zerotonine2da.tistory.com 1. [3단계] 중 [3단계] 구현 & TIL redux 브랜치 : 모두 redux 라이브러리를 이용한 코드로 리팩터링 (1) props처럼 계속 부모>자식 컴포넌트로 전달을 안 해도 되는 장점이 있음 (2) 기존에 받아온 데이터의 형식과 리덕스로 전달받은 값이 약간 달라서 헷갈리는 부분..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 11. 17.
• textsms

리액트 팬레터 홈페이지 만들기: 2단계. contextAPI로 리팩토링

0. 1단계 props-drilling으로 생성한 홈페이지 리액트 팬레터 홈페이지 만들기: 1단계. props-drilling 만들기 완료. 1. 필수 요구 사항 styled-components 를 이용하여 스타일링 전역 스타일에 reset.css 를 적용해주고 box-sizing이 border-box가 되도록 설정 styled-components에 props를 넘김으로 인한 조건부 스타일링 적용 팬레터 zerotonine2da.tistory.com 1. [3단계] 중 [2단계] 구현 & TIL context 브랜치 : props-drilling의 작업 코드로 react context API를 사용 (전역상태를 이용한 코드로 리팩터링) (1) 확실히 props로 하는 것보다 코드가 간결해졌고, 이해하기 ..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 11. 16.
• textsms

리액트 팬레터 홈페이지 만들기: 1단계. props-drilling 만들기 완료.

1. 필수 요구 사항 styled-components 를 이용하여 스타일링 전역 스타일에 reset.css 를 적용해주고 box-sizing이 border-box가 되도록 설정 styled-components에 props를 넘김으로 인한 조건부 스타일링 적용 팬레터 등록 시 id는 uuid 라이브러리를 이용 2. [3단계] 중 [1단계] 구현 props-drilling 브랜치 : useState만으로 상태관리해서 코드 작성 context 브랜치 : props-drilling의 작업 코드로 react context API를 사용 (전역상태를 이용한 코드로 리팩터링) redux 브랜치 : 모두 redux 라이브러리를 이용한 코드로 리팩터링 3. 배운 점 특정 멤버의 댓글 클릭 > 상세페이지 이동 > 수정/홈..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 11. 15.
• textsms

리액트 팬레터 홈페이지 만들기: 댓글 관리와 글자수 제한 기능 구현

1. 화면 1. 댓글이 없으면 '댓글 없음'을 알려주고 있으면 댓글 보여주기 2. 댓글 등록시 작성자/내용에 최대 글자수 제한주기 2. 코드 (1) 댓글 유무에 따른 화면 구성 //멤버에 따라 댓글 필터링 const filteredByMember = comments.filter((comment) => comment.member === member); //필터링된 댓글 없으면 '댓글없음 '표시 if (filteredByMember.length === 0) { return ( {member}의 등록된 팬레터가 없습니다. 댓글을 남겨주세요! ); } ▶ 멤버에 따라 필터링 하고 length로 구분 return ( {filteredByMember.map((comment) => { return ( {comment..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 11. 15.
• textsms

리액트 팬레터 홈페이지 만들기: 댓글 수정 기능 구현

0.TIL ▶ useState만 사용해서 Router 구현은 Router.js 에서 모든 Route마다 props로 데이터를 전달해야함. ▶ 메인페이지 -> 상세페이지 -> 상세페이지의 업데이트 페이지 이렇게 이동하도록 구현을 알기까지 삽질함. ▶ 데이터를 업데이트 하기 위해서는 2가지로 나눔 (데이터 변경 & 수정완료 시 처리) --> 이 부분을 한 번에 처리하려고해서 시간을 너무 버렸음...😢안 될때는 나눠서 생각하면 편리함. 1. 화면 1. 등록된 댓글의 "하니"를 클릭시 상세페이지 이동 2. 상세페이지에서 [수정] 버튼 클릭하여 버튼 재 클릭시 수정완료 ( 버튼 명칭은 변경예정 "수정수정완료") 3. [홈으로] 버튼 클릭하여 돌아가면 수정된 데이터 확인 가능 2. 코드 const param = u..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 11. 14.
• textsms

#06 리액트 숙련 : useState 함수형 업데이트

0. TIL ▶ useState 함수로 사용 장점은 함수로 useState 사용시 props를 받을 필요가 없음 ▶ setState만 있어도 매개변수(prev)로 데이터(comments)를 가져올 수 있음 const [number, setNumber] = useState(0); ▶ 함수형 업데이트: setNumber(()=>{}) ▶ setNumber( (현재값(prev) =>{ return prev +1 }) = setNumber(number +1) : ▶결과는 같지만 차이점이 있음!! (동일 코드 3번 실행했을ㄸㅐ) (1) 기존 값 setNumber(number +1) - 배치성으로 업데이트 진행 (변경된 사항을 한번에 모아서 1번만 업데이트) setNumber(number +1) setNumber(..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 11. 13.
• textsms