리액트 : Context API (전역에서 데이터 사용)

* props : 부모 > 자식 > 그 자식 > 그 자식의 자식 .... * props drilling 발생 : 이 props가 어떤 컴포넌트로부터 왔는지 파악하기 어려움 + 유지보수 어려움 * useContext : 전역에서 데이터 관리 가능 (1) Context API 필수 개념 3가지 createContext : context 생성 Consumer : context 변화 감지 Provider : context 전달 (to 하위 컴포넌트) (2) 주의 사항 : 렌더링 문제 provider (내 코드에서는 ) 가 제공한 value값이 달라지면 useContext 사용하는 모든 컴포넌트가 리렌더링됨! => 이것의 대안 : 메모이제이션 (3) 코드로 구현 src 폴더 안에 context 폴더 생성 > js..

• format_list_bulleted React
• · 2023. 11. 16.
• textsms

[프로그래머스 | JavaScript] 없는 숫자 더하기

(1) 내 코드 function solution(numbers) { let arr = numbers.sort(); let answer = 0; let cnt = 0; for (let i = 0; i 이 값을 answer 변수에 저장 -> cnt 증가 (2) 다른 사람 풀이 function solution(numbers) { return 45 - numbers.reduce((cur, acc) => cur + acc, 0); } ▶ 0~9까지의 합 : 45 ▶ 주어진 배열의 합 : x ▶ 45- x = 없는 숫자 더하기. 오..! 역발상!

• format_list_bulleted 코딩테스트
• · 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

[프로그래머스 | JavaScript] 핸드폰 번호 가리기

(1) 내 코드 function solution(phone_number) { let back_number = phone_number.slice(-4); let star = ''; for (let i = 0; i < phone_number.length - 4; i++) { star += '*'; } return star + back_number; } ▶ slice로 뒤에서부터 4글자 반환 : phone_number.slice(-4); ▶ 배열의 길이에서 -4 한길이만큼 ' * ' 추가 ▶ 추가된 * 과 slice로 반환한 값 더해서 출력 (2) 다른 사람 풀이 1 function hide_numbers(s){ var result = "*".repeat(s.length - 4) + s.slice(-4); r..

• format_list_bulleted 코딩테스트
• · 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