서론 블로그나 쇼핑몰 등 기본적인 웹사이트를 구성할 때 Header, Section, Footer, SideBar와 같은 기본요소를 가지게 된다. 메뉴를 클릭하여 페이지가 변경되면 Header, Footer, SideBar는 항상 같은 내용을 유지하며, Section의 내용만 변경되게 된다. 이번 포스트에서는 React를 이용하여 기본요소를 가지며, Section만 변경되도록 Layout을 구성해볼 계획이다. 1. 프로젝트 구성 1-1. 프로젝트 생성 npx create-react-app react-layout-app 1-2. package 설치 npm install --save react-router-app styled-components 1-3. 폴더 구성 2. App 구현 3. Layout 구현 3..

2019/11/23 - [Font-end/React] - [REACT] 무작정 시작하기 (1) - 프로젝트 준비 2019/11/24 - [Font-end/React] - [REACT] 무작정 시작하기 (2) - Component 지난 포스트에서 Counter Component를 만들어 보았다. 만들면서 간략하게 설명하고 넘어갔던 props와 state에 대해서 알아보도록 하겠다. React에서 변수를 사용하려면 반드시 알고 있어야하는 키워드이므로 잘 숙지하길 바란다. 1. props란? 1-1. 부모로부터 상속받아서 사용하는 데이터로 값을 절대 변경할 수 없음. 1-2. 최하위 자식 Component에서 최상위 Component의 Props를 사용하려면 계속해서 넘겨줘야하며 depth가 깊어질수록 복잡해..

2019/11/23 - [Font-end/React] - [REACT] 무작정 시작하기 (1) - 프로젝트 준비 이전 포스트에서는 React 프로젝트를 설정하고 간단하게 Hello, World를 출력하는 Component를 생성하여 보았다. 이번 포스트에서는 이벤트가 발생하는 Component를 처리해보면서 전반적인 기능들에 대해서 알아보도록 하겠다. 하나의 Component에 많은 기능들을 함축시켜 설명하려다보니 다소 복잡할 수도 있지만, 최대한 간단하게 정리하도록 해보겠다. 1. 프로젝트 구조. 1-1. 폴더 및 파일 추가. - [ ./components/utils ] 폴더가 추가되었으며, [ Counter.js, index.js ] 파일을 추가하였음. 2. Component 생성. 2-1. Coun..

웹 프로그래밍을 배울때만 해도 jQuery를 이용해서 동적 웹페이지를 만들었었는데, 이제는 Angular, Vue, React 등 다양한 프론트앤드 프레임워크들이 등장하면서 대세를 이루고 있는 추세이다. 이번 무장적 시장하기 시리즈에서는 이 중 React를 다루어보려고 한다. React는 프로젝트를 구성할 때, 패키지들을 설치하다보면 간혹 버전의 호환성에서 문제가 발생하는 경우가 종종있다. React를 처음 입문하는 사람이라면 멘붕에 빠질 수 밖에 없을 것이다. 하지만 걱정하지 마시라 [ create-react-app ] 이라는 툴을 사용하면 쉽고 빠르게 React 프로젝트를 구성할 수 있다. 하지만, 이번 포스트에서는 이 툴을 사용하지않고 한땀한땀 프로젝트를 구성해나갈 계획이다. https://ko.r..