자기계발 캠퍼스

모바일에서 가로로 스크롤되는 메뉴 / 내비게이션 바는 흔히 볼 수 있다. 자주 보이는 컴포넌트이지만 구현은 전혀 어렵지 않다. 기본적인 논리는 이렇다. - 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..

처음 보는 useReducer라는 훅이다. 당연히 공부할 때 공식 문서는 국룰이다. 강의를 들으면서 살짝 응용을 해보긴 했는데 공식문서에 나와있는 예시가 더 이해가 쉬운 듯하다. 오늘 처음 배워서 일단 쉬운 걸로 매커니즘을 이해하는 것이 우선이라고 생각한다. 일단 useReducer는 useState가 너무 많아지거나 복잡해질 때 이를 효과적으로 활용하기 위해 등장했다. 그래서 useState와 구조가 크게 다르지 않다. 위의 구조로 되어있다. useState에서 [원하는 변수, 변수조작함수]=useState(초기상태) 거기에 조금 더 추가된 것들이 있다. 앞에 구조는 똑같고 뒤에 reducer라는 애가 init라는 애가 새로 생겼다. 먼저 reducer가 어떻게 작동하는지 보자. 흔한 예시다. 버튼을 ..

useEffect는 예전에도 배웠었지만 기억이 조금 희미한 관계로 다시 정리해보려 한다. useState와 마찬가지로 정말 중요한 훅이라고 생각하기 때문. 일단 useEffect 공식문서 먼저 보자. useEffect를 알아보기 전에 effect라는 게 뭔지 알아보자. side effect나 effect라 불리는 녀석은 눈에 보이지 않는 행동들을 의미한다고 보면 된다. 예를 들어 데이터를 fetch하거나 구독을 설정하거나 리액트 컴포넌트의 DOM을 수정하는 것을 의미한다. 구독 설정 보이는데요? 그거는 데이터에 따라서 ui가 바뀌게 만들어놓은거고 멍충아 이제 아래 예시를 보자. useState처럼 리액트에서 그냥 불러오면 되고 useEffect 안에 저런 함수가 있다. useEffect 안에 있는 함수는..

useRef라는 새로운 훅에 대해서 알아보자. reference할 때 ref를 따온 건데 어떤 걸까. const refContainer = useRef(initialValue); useState와 비슷하게 const 변수에 설정할 초기값을 넣어줌으로써 활용한다. (빈칸으로 둬도 됨) useRef의 예시이다. inputEl을 선언한 후에 input 값에 ref = {inputEl} 이라는 속성을 넣어준다. 그러면 우리는 이제 inputEl을 통해 이 input에 접근할 수 있게 된다. 단 .current 프로퍼티를 통해서. 예를 들어 input 박스 안에 'abcde'를 입력했다고 하자. 이 박스 안에 있는 값을 불러오기 위해 inputEl.current.value를 불러오면 된다. inputEl.curr..

리액트를 배울 때 가장 많이 보이는 구조는 바로 ReactDOM.render(, document.getElementById('root')); 이다. HTML 파일에 id:'root'인 div에 을 렌더링해주고 리액트로 열심히 컴포넌트 만들고 지지고 볶고 하면서 에 넣어주는 구조이다. 여기서 의문점! 항상 root라는 div 에만 우리가 렌더링을 해야 하나? 당연히 아니다. 하지만 ReactDOM.render는 같은 페이지에서 복수로 일어날 수 없다. 예를 들어 ReactDOM.render(, document.getElementById('root')); ReactDOM.render(, document.getElementById('root2')); 이런 구조는 있을 없다는 것이다. 이를 해결해주는 것이 바로..

예전에도 다뤘지만 코딩은 손에 익을 때까지 반복하는 것이 쵝오 리액트 컴포넌트에 스타일을 입히는 2가지 방식에 대해 살펴보려 한다 1. style이라는 props에 직접 css 코드를 다 입력해준다. 이런 식으로 작성하는 방식이다. 가장 중요한 점은 역시 style뒤에 중괄호가 2개가 들어가야 한다. style 이라는 props안에 자바스크립트 코드를 넣어주기 위한 중괄호 하나 css를 표현할 때 object형식으로 표현하기 때문에 (ex) { border: 1px solid black; padding: 10px; } 중괄호 하나 더 중괄호 2개로 감싸줘야한다. style 안에서도 역시 삼항연산자 쌉가능 조건에 따라 색깔을 내 맘대로 바꿔줄 수 있다. isValid === false 일 때는 아래와 같은..

리액트를 활용할 때 삼항연산자는 정말 많이 쓰인다. 삼항연산자를 모르면 여기로 가서 보고 오시길 {조건 ? 맞을 때 : 틀릴 때} 이렇게 사용된다. Boolean 타입의 조건이 무조건 앞에 오고 그 다음에 ?를 붙여주고 조건이 true일 때 실행할 코드가 앞에 조건이 false일 때 실행할 코드가 뒤에 온다. 간단한 예시들은 언제나 쉽다. 하지만 역시나 얘도 코드가 길어질 때 가독성이 떨어진다. 조건이 맞을 때 No expeneses Found. 조건이 틀릴 때 filteredItems.map((expense) => { return ( ); } 이렇게 실행한다고 하면 어떨까? jsx에서 삼항연산자는 중괄호 {}를 사용해서 사용하는 경우가 많은데 이 중괄호의 끝이 어딘지 헷갈리게 되어 어디까지가 연산문인지..

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..