자기계발 캠퍼스

모바일에서 가로로 스크롤되는 메뉴 / 내비게이션 바는 흔히 볼 수 있다. 자주 보이는 컴포넌트이지만 구현은 전혀 어렵지 않다. 기본적인 논리는 이렇다. - div라는 태그가 있는데 안에 내용물이 넘치는 상황 - 내용물이 overflow되면 가로로 스크롤 될 수 있게 설정을 해주면 된다 아래 예제는 tailwind를 사용하여 구성하였다. {navItem.map((item) => { return ( // 내용물 알아서 ); })} 기본적으로 div는 block이기 때문에 width가 전체 가로 길이와 일치한다. 모바일 화면에서 가로길이를 넘어갔을 때 이를 화면 안으로 몰아서 넣으려고 하지 않게 해주기 위해 whitespace 속성을 사용한다. 왼쪽은 일반적인 div 태그 내에서 내용물이 넘칠 때의 상황이다...

동아리에서 진행하는 프로젝트 중 드롭다운을 만들어야했는데 드롭다운 하나를 위해서 디자인 라이브러리를 받는 건 프로젝트의 용량으로 보나 여러모로 너무 낭비라고 판단하여 직접 구현하기로 했다. 먼저 구현된 결과물부터 바로 보고 어떻게 구현했는지 분석해보자. const [activeIdx, setActiveIdx] = useState(); {adminMenu.map((menu, index) => { const active = activeIdx === index + 1 ? true : false; return ( ); })} // AdminMenu 컴포넌트 const AdminMenu = ({ menuItem, idx, activeIdx, active, setActiveIdx, subMenu }) => { re..

현재 사용하고 있는 기술 스택은 Next.js이다. Tailwind CSS, Styled Component도 쓰는데 스타일링 관련이니깐 잠깐 제끼자. const [menuImage, setMenuImage] = useState(""); { let reader = new FileReader(); if (event.target.files[0]) { reader.readAsDataURL(event.target.files[0]); } reader.onloadend = () => { const resultImage = reader.result; setMenuImage(resultImage); }; }} /> 먼저 사진을 받아오기 위한 부분이다. https://developer.mozilla.org/ko/docs/..

먼저 장바구니에서 구현하고자 하는 기능은 이렇다. - 아이템 항목에서 추가 기능 - 장바구니에서 아이템 수량 조절 - 장바구니 토글 - 장바구니 실시간 저장 + 불러오기 아이템 항목에서 추가 기능 const cartSlice = createSlice({ name: "cart", initialState: { item: [], totalQuantity: 0, cartChange: false }, reducers: { addCartItem: (state, action) => { const newItem = action.payload; const existingItem = state.item.find((item) => item.id === newItem.id); if (!existingItem) { state...

React를 활용해서 Form을 만들어본다. 간단하게 이름과 이메일을 받아서 submit하는 form이다. 체크할 부분 -이름 빈칸인지 아닌지 확인 -이메일은 @가 들어갔는 확인 -클릭하고 넘어갈 때도 이름과 이메일 조건 맞는지 확인 import useValidate from "../hooks/use-validate"; 먼저 useValidate라는 custom hook을 만들어준다. return { inputValue, onChangeHandler, onBlurHandler, isValid, className, reset, }; 이 훅에 포함될 것은 위와 같다.. onBlur이 뭐냐면 처음에 input 박스 클릭하면 focus가 되는데 이 focus가 풀리면 Blur라고 한다. input 입력하다가 다..

React의 최대 장점은 컴포넌트로 잘개 쪼개어 조작이 편하다는 것이다. 그런데 생각해보니깐 컴포넌트끼리도 겹치는 것들이 많다. HTML이 될수도 있고 CSS 스타일이 겹치는 게 있을 수도 있다. 이를 더 편하게 다루고자 하는 것이 바로 composition 한국말로 '상속'이다. 일단 단적으로 예시를 보자. 다른 두 개의 컴포넌트가 모두 Card라는 태그로 감싸져있다. 일단 여기서 의문점 로 시작 안했는데 에러가 안 나오네? 이제 Card 컴포넌트가 어떤 특성을 가지고 있는지 살펴보자. Card는 props를 받아서 div 안에 {props.children}을 해준다. 이 구조로 다른 컴포넌트들로 넘어가기 때문에 다른 컴포넌트들은 사실상 로 시작하는 HTML을 리턴하는 것이나 마찬가지이다. 꼭 prop..

npx create-react-app을 한 후에 components 폴더를 만들어서 내가 원하는 이름의 js 파일을 만들어준다. 컴포넌트라는 말이 리액트에서 뭔가 있어보이기도 하는데 그냥 자바스크립트에서 하나의 함수에 불과하다고 생각하면 된다. 소비지출을 만드는 항목을 만들기 위해 ExpenseItem.js라는 컴포넌트를 만들어준다. 이 안에는 날짜와 항목 그리고 가격을 나타내는 div를 만들어준다. 잘 보면 ExpenseItem 뒤에 date, title, amount라는 항목이 있다. 어 저기는 arguments가 들어가는 자리인데? 맞다. 리액트에서는 props라는 이름으로 arguments 자리에 들어가는 녀석들이 있다. 이름은 내 맘대로 짓고 컴포넌트를 사용할 때 data, title, amou..

useState를 배웠으니 useEffect라는 훅을 살펴보자. useState를 활용하면 setState를 계속해서 해주고 state 값을 계속해서 리-렌더링해주게 된다. 하지만 예를 들어 날씨나 교통상황과 같은 데이터를 받을 때 useState를 활용하면 setState가 실행될 때마다 계속해서 데이터를 받아와야하는 고생을 해야한다. 이를 방지하고자 하는 것이 바로 useEffect라는 훅이다. (리액트 공식 홈페이지 링크 걸어놓음) counter와 keyword의 두 개의 state를 활용하여 useEffect를 살펴보자. useEffect의 문법은 이렇다 useEffect(실행할 내용, 변수) 실행할 내용은 위와 같은 console.log나 어떤 함수의 내용이나 아무거나 상관없다. 뒤에 나오는 변..

Btn을 만드는 함수를 선언했고 text와 onClick을 props로 받아오고 있다. 그리고 렌더링한 text를 콘솔에 출력하는 코드를 숨겨놓았다. 훅을 사용하여 value를 다루는 state를 선언하고 Btn이 클릭될 때마다 state를 변경할 수 있게 했다. 버튼을 클릭하면 Btn 두개가 리-렌더링이 되어 콘솔에 두개씩 뜬다. 2번째 버튼은 text값이 변하지 않음에도 렌더링이 또 되는 것이다. 이를 막고자 React에는 memo라는 기능이 있다. memoizing의 약자로 렌더링의 결과가 이전 렌더링의 결과와 같을 때 리-렌더링을 하지 않는 것이다. 아래 예시를 보자. Btn 컴포넌트를 memo해주고 MemorizedBtn을 선언해준다. 그리고 Btn 태그 대신 MemorizedBtn 태그를 대신..

Hook 이라 함은 저번에 살펴본 UseState를 활용하는 것입니다. https://selfdevelopcampus.tistory.com/entry/ReactHook-useState-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0 React(Hook) - useState 활용하기 오늘은 리액트 훅 useState를 살펴보겠습니다. (링크: 리액트 훅 공식문서) const [count, setCount] = useState(0) count라는 변수를 const로 선언을 해주고 초기값에 0을 부여했다는 의미입니다. setCount는 c.. selfdevelopcampus.tistory.com 이 Hook을 사용하여 Array에서 push 메소드와 똑같은 기능을 하는 걸 만들어보려 합니다...