props를 통해서 컴포넌트를 거쳐 데이터를 주고받으려면 불편함이 있다. 위 사진과 같은 구조에서 Login 이벤트를 Cart 컴포넌트로 직접 전송이 불가능 하기 때문에 이런식으로 props로 보내서 전송하게 된다. 하지만 이러한 구조는 프로젝트의 규모가 커질수록 불편하고 문제가 생기기 쉽다. 리액트는 이러한 문제를 해결할 수 있는 방법을 몇가지 가지고 있는데 1. Context API 2. Redux 와 같은 외부라이브러리가 있다. 오늘은 Context API에 대해 알아보려고 한다. Context 란? Context는 리액트 컴포넌트간에 어떠한 값을 공유할수 있게 해주는 기능이다. 주로 Context는 전역적(global)으로 필요한 값을 다룰 때 사용하는데, 꼭 전역적일 필요는 없다. Context..

useReducer란? useReducer는 React 내장 훅 중의 하나이다. useState와 비슷하지만 더 많은 기능을 가지고 있다. 즉, useReducer는 useState처럼 State(상태)를 관리하고 업데이트 할 수 있는 Hook이다. useReducer 사용법 const [state, dispatch] = useReducer(reducer, initialArg, init); const [상태 객체, dispatch 함수] = useReducer(reducer 함수, 초기 상태, 초기 함수) useReducer 🆚 useState 언제 useReducer를 사용하며, 언제 useState를 사용해야 할까? useState 관리해야 할 State 및 데이터가 1개일 경우 그 State가 단순..

Portal 이란? ReactDom의 Portal 기능은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 기능을 제공한다. 내 리액트 프로젝트에서 모달창을 활성화 시켜보면 root div 안에서 렌더링 되는걸 확인할 수 있다. 즉, 모달창은 root의 자식 컴포넌트이다. 사용하는 이유는? 일반적으로 react는 부모 컴포넌트가 렌더링되면 자식 컴포넌트가 렌더링되는 tree 구조를 가지고 있다. 하지만 때때로 이런 tree구조가 불편함을 가져다주기도 하는데, 이럴 때 부모-자식 관계를 유지하지만 독립적인 위치에서 렌더링을 하면 훨씬 편리한 경우가 있다. 대표적인 예로 modal은 부모 컴포넌트의 스타일링 속성에 제약을 받아 z-index 등으로 번거로운 후처리를 해줘야한다...

💡리액트를 왜 쓰는 걸까? SPA(Single Page Application) 만들 때 쓴다. SPA(Single Page Application) : 어떤 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것을 의미 리액트의 장점 가장 오래 됐고 사용하는 유저가 가장 많다. (= 커뮤니티 형성이 잘 되어있고 자료가 방대한 만큼 구글링을 통해 원하는 정보를 쉽게 찾을 수 있다.) 리액트를 쓰면 html 재사용이 편리하다. 같은 문법으로 앱 개발이 가능하다. (React Native) 개발환경 세팅 1. Node.js 설치 LTS버전(안정적, 신뢰도 높음)과 Current버전(최신 기능)이 있는데 안정적인 LTS버전을 추천한다. 2. VSCode 설치 리액트를 공부하는 단계라..

전에 하던거에 이어서! 제목 누르면 아래에 노란색 모달 박스 on, off 다시 만들어주고 이번에 하려는건 모달박스의 제목 위치에 우리의 포스팅 제목(의정부 맛집 추천, 서울 데이트 코스, PC게임 추천)을 넣어주려고 한다. function App() { let [title, setTitle] = useState( ['의정부 맛집 추천', '서울 데이트 코스', 'PC 게임 추천'] ); let [like, likeCount] = useState([0, 0, 0]); let [modal, setModal] = useState(false); return ( MILOG { // i = 반복문 돌 때 마다 1씩 증가하는 정수 title.map(function(e, i) { return ( { if(modal ..

원래 리액트는 노션에 따로 정리하면서 공부하고 있었는데 블로그와 노션 왔다갔다 작성하는게 번거로워서 ㅠㅠ 그냥 블로그에 정리하면서 공부하기로 했다.. Create React App (터미널에서 작업영역 폴더로 이동 후) npx create-react-app [프로젝트이름] 참고로 create-react-app은 리액트를 만든 페이스북에서 제공한 CLI(커맨드 라인 인터페이스) 도구이다. 정상적으로 설치가 되었다면 VSCode 작업 폴더에서 터미널 열고 npm start 해서 실행시키면 된다. Component function Name() { return ( Hello Hi ); } 함수의 형태로 첫 글자는 대문자로 한다 **약속** return안에 html 작성하면 되는데 ** 하나의 div로 감싸 주어..