React.js Web FrontEnd Dev.
1.[React] context API로 prop drilling없이 컴포넌트끼리 state공유하기
createContext() 함수로 생성한 컨텍스트 객체의 Provider컴포넌트에 value prop에 어디서든 접근 가능한 전역 state를 전달하고, useContext()로 그 값들에 접근하는 방법을 자세히 알아봅시다.
2.[React] CSS-in-JS로 CSS를 JSX내에서 사용하기 (feat. styled-components)
안녕하세요. 오늘은 React로 개발할 때, 스타일링을 편하게 할 수 있는 방법에 대해 알아보겠습니다. 평소 저희는 .js나 .jsx파일에 로직을 구현하고,별도의 css파일을 만들어 이를 import했죠. 이 경우, 두 개 이상의 파일을 교차하며 개발해야 하기에 불편함
3.[React] 이벤트 핸들러 호출 시 인자를 함께 전달하는 방법
안녕하세요, 오늘은 React로 프로젝트를 진행하다 한 번쯤은 마주할 문제 상황에 대해 글을 써보려 합니다.리액트로 개발을 하다 보면, 여러가지 유저 이벤트들을 처리해야 합니다.여기선 가장 간단한 클릭 이벤트를 예시로 사용하겠습니다.
4.[React] 자식 컴포넌트에서 prop값을 state로 저장해 자유롭게 수정하기
리액트에서는 prop으로 컴포넌트 바깥으로 데이터를 공유할 수 있습니다. prop에는 react state뿐 아니라, JS변수, JS함수도 담아 보낼 수 있는데요, 리액트의 설계원칙 중 "prop 불변성" 이란 것이 있습니다. 이번 포스팅에서 가장 중요한 개념인데요
5.[React] controlled components 로 UI 개선하기
안녕하세요, 오늘은 React의 controlled components를 활용하여 UI를 개선한 사례를 하나 소개해볼까 합니다. input tag에 유저가 입력한 값들이 컴포넌트의 state에 실시간으로 반영되는 컴포넌트를 controlled components라고 부
6.[React] All About React Hook Rules (feat. lexical scope, impure function, spread assignment)
Meta 공식 가이드에서 제공하는 React Hook 사용규칙을 정리해볼게요.먼저, 리액트 훅이라면 useState든 useEffect든 종류에 상관없이 지켜야 할 약속을 알아볼게요.리액트 hook은, 일반 자바스크립트 함수에서는 사용할 수 없습니다. 오직 리액트 컴포
7.[React] react-router-dom useParams 도입기 - 전체 항목 페이지에서 세부 항목 페이지로 전환하기
아래와 같이 게시물의 id를 url에 동적으로 전달하여전체 게시글이 로드되는 화면에서 각 게시물을 클릭하면 해당 게시물만이 보이는 페이지로 이동하도록 구현하고자 합니다. 아래는 사용자들이 게시판에 업로드한 모든 게시물을 렌더링하는 컴포넌트의 코드입니다.프로젝트의 전체적
8.[DRF - React] JWT인증 방식의 서비스에서 로그인 된 유저 이름 화면에 띄우기
로그인을 하면, 사용자의 이름을 포함한 상쾌한 인사 메세지를 건네주면 좋을 것 같습니다. 아래와 같은 느낌으로 말이죠.디자이너들이 보면 기겁할 디자인이지만,저희는 디자이너가 아니니 로직에만 집중해 보겠습니다. 저의 경우, 프론트엔드는 React, 백엔드는 DRF(Dja
9.[React] DELETE 요청 이후 state를 변경해주지 않으면 UI에는 삭제된 데이터가 여전히 남는다 (feat. 자식 컴포넌트에서 부모 컴포넌트의 state를 어떻게 수정할 것인가?)
게시판 삭제 기능을 구현하고 있습니다. axios로 서버에 DELETE 요청을 보내면백엔드의 DRF view가 DB에서 해당 게시글을 찾아 삭제하는 구조입니다. 삭제 버튼을 누르면, DB에서는 데이터가 잘 삭제되는데,화면에는 여전히 해당 게시글이 남아있는 문제를 마주하