FullStack/React-React Native5 [React] 리액트 부트스트랩 사용해서 페이지 디자인하기 (React bootstrap) 웹 페이지를 디자인하는데는 많은 툴이 있다. 순수 CSS를 쓰는 방법도 있고, Ant Design, 부트스트랩, 요새 급 부상하고 있는 TailWind 등 선택의 여지가 많다. 나는 아직까지 많은 사람들이 사용하고 있고, 적용되어 있는 페이지도 많은 부트스트랩을 선택해 사용하고자 한다. 1. 프로젝트에 리액트 부트스트랩 적용하기 나는 나만의 블로그를 만드는 프로젝트를 진행중인데, 리액트 부트스트랩에서 Card항목을 가져와 내 프로젝트에 적용시켜보려고 한다. 우선 터미널을 열고 아래 명령어를 입력한다. npm install react-bootstrap bootstrap@5.1.3 이후에 App.js 파일 혹은 index.js 파일에 아래 코드를 추가해준다. bootstrap에서 제공하는 css를 적용하기 .. 2022. 1. 23. [React] SPA란? 리액트 라우터를 사용해서 페이지 이동하기 (React Router) 1. SPA란? SPA란 Single Page Application의 약자로 말 그대로 한개의 페이지로 이루어진 APP을 뜻한다. 예전의 개발방식에서는 페이지를 이동할 때마다 새로운 html을 불러와서 보여주었다. 이때마다 트래픽이 많이 발생하고 사용자가 몰리면 서버측에 높은 부하가 걸릴 수 있다. 그래서 이 문제를 해결하고자 리액트는 렌더링을 웹 브라우저에서 담당하도록 하고 우선 브라우저에 불러와서 실행시킨 후 필요한 부분문 자바스크립트를 이용하여 업데이트 해준다. SPA방식으로 인해 페이지 전환 간에 트래픽을 줄여준다는 것이 가장 큰 장점이다. 하지만 이로 인해 따라오는 단점도 있다. 가장 큰 단점으로는 앱의 규모가 커지면 첫로딩 때 현재 페이지에는 쓰이지않는 다른 컴포넌트까지 로딩하기 때문에 처음 .. 2022. 1. 20. [React] 리액트 헤더 컴포넌트 만들기 (React Header Component) 리액트의 컴포넌트도 알아보았고, create-react-app을 활용해 앱도 생성했다. 이제 컴포넌트를 만들면서 실제 개발을 해보도록 하자 ! 우선 앱을 편집기로 열고 밑의 그림과 같이 파일경로에 파일을 만들어주도록 하자. Header.js import "./Header.css" function Header() { return( 홈 설정 ) } export default Header Header.css .header{ display: flex; z-index:999; background-color: aliceblue; } App.js import './App.css'; import Header from './components/Header/Header.js' function App() { return (.. 2022. 1. 19. [React] 리액트 컴포넌트란? (React Component) 1. 컴포넌트란 리액트에서 컴포넌트란 앱을 이루는 최소한의 단위를 말한다. 웹페이지는 텍스트 박스, 포스트 카드, 헤더, 푸터 등 많은 요소들로 이루어져 있다. 이를 한 파일에 모두 작성하다 보면 코드의 가독성이 떨어지고 유지보수가 힘들다는 단점이 있다. 이를 해결하기 위해 독립적인 기능을 수행하는 단위 모듈들을 따로 다른 파일에 작성해 놓은 것이 컴포넌트라고 보면 되겠다. 이를 통해 코드의 가독성과 유지보수를 쉽게 만들어준다. 2. 컴포넌트의 props와 state 컴포넌트 사용에 앞서 꼭 알아야 할 개념이다. props는 부모 노드에서 자식 노드에게 데이터를 전달할 때 사용하는 인자이다. 자식 노드에 데이터를 넘겨줘야할 때 사용하며 할당된 이후에는 컴포넌트 내부에서 데이터 값을 변경하여 사용할 수 있.. 2022. 1. 19. 이전 1 2 다음
