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