제로베이스

state는 리액트에서 화면을 그려내는 데 굉장히 중요한 역할을합니다. state라는 단어는 한국어로 '상태'라는 뜻이 있는데요. 리액트에서의 state도 그 의미가 다르지는 않습니다. 상태가 바뀔 때마다 화면을 새롭게 그려내는 방식으로 동작을 하는 것이죠. 리액트에서 state를 만들고, state를 바꾸기 위해서는 일단 useState라는 함수를 활용해야 합니다. import { useState } from 'react'; // ... const [num, setNum] = useState(1); // ... 보통 위와 같이 Destructuring 문법으로 작성하는데요. useState 함수가 초기값을 아규먼트로 받고 그에 따른 실행 결과로 요소 2개를 가진 배열의 형태로 리턴을 하기 때문입니다. ..

프로젝트 소개 4bsop은 오프라인 기반의 뷰티 브랜드로 다른 이커머스 웹사이트와는 달리 구매를 유도하여 판매를 일으키는데 중점을 둔 형태가 아닌 웹사이트에서 브랜드의 정체성을 나타내며 오프라인에서의 고급스러운 브랜드 이미지와 자사 제품을 온라인에서도 동일하게 경험할 수 있도록 심미성과 부드러운 사용감을 주안점으로 두고 최대한 간편하게 쇼핑이 가능하도록 UI/UX를 직관적으로 구성하였습니다. 대부분 페이지가 넘어가는 방식이 아닌 모달창을 활용하여 사용자에게 웹사이트를 이용하는데 있어서 피로감을 덜어주고 답답함이 없도록 구성해 좋은 사용자 경험을 느낄 수 있도록 구현했습니다. - 기간 : 2023.04.03 ~ 2023.04.14 (2주) - 팀원 : Front-end 2명, Back-end 2명 1차 ..

리액트에서 활용할 수 있는 조건부 렌더링에 대한 꿀팁을 알려드리겠습니다. 논리 연산자 활용하기 AND 연산자 import { useState } from 'react'; function App() { const [render, setRender] = useState(false); const handleClick = () => setRender(!render); return ( 클릭! {render && 보인다} ); } export default App; 처음 마운트 될 때는 render state값이 false라서 뒤에 있는 보인다가 렌더링 되지 않고 버튼을 클릭하면 state 값이 변경되어 리렌더링이 일어나는데 이때는 render state값을 NOT연산자를 사용하여 이전 state 값의 반대를 할당..

최종 구현 영상 React의 props, state를 활용하여 댓글 추가 기능을 구현할 수 있습니다. 먼저 기능을 구현하기 위해 3개의 컴포넌트를 만들었습니다. 사용자가 값을 입력할 수 있는 CommetForm 컴포넌트 function CommentForm() { return ( 게시 ) } 사용자가 입력한 값을 보여줄 영역인 CommentBoard 컴포넌트 function CommentBoard() { return 반복적으로 들어갈 댓글 요소를 나타내는 Comment 컴포넌트 function Comment() { return } step 1. input에 입력된 값을 state로 관리 - useState를 활용하여 사용자가 입력한 input값을 저장해주도록 합니다. - input태그에 입력한 값이 바뀔..

새로운 기술을 학습할 때는 항상 이 기술이 어떤 문제를 해결하기 위해 만들어진 기술인지, 등장하게 된 배경이 무엇인지에 대해 이해하고 필요성을 깨닫는 것이 중요합니다. 그렇다면 리액트의 탄생에 대해서 알아볼까요? 오늘날 우리가 이용하는 웹사이트는 다양한 기능 등을 담고 있습니다. 한가지 서비스에 전부 담으려다보니 웹사이트가 굉장히 복잡해진다는 것인데요. 웹사이트가 복잡해진다는 것은 자연스레 코드도 굉장히 복잡해진다는 말입니다. 웹사이트의 인터페이스가 점점 더 복잡해지면서 개발자들의 효율은 점점 더 떨어지게되어 이 문제를 해결하기 위해 생산성을 향상시키고, 많은 양의 데이터 관리와 코드 유지 보수를 더욱 편리하게 하기 위해 다양한 프론트엔트 프레임워크와 라이브러리가 등장하게 되었습니다. 그 중에서도 왜 리..