React.js

01. 문제 상황현재 진행중인 프로젝트에서, 꽉 찬 컴포넌트를 만들어야 할 일이 생겼다.그를 위해 찾아보니 가장 많이 보이는 해결책이 vw, vh 단위를 사용하는 것이다.그러나 이 방법을 프로젝트에 적용시켜보니 그리 좋은 해결책은 아닌것 같다는 생각이 들었다.이유는 아래와 같다.vw, vh 단위는 브라우저의 스크롤 영역까지를 포함시킨 뷰포트 크기를 반환한다.이런 이유로 언제 브라우저에 스크롤바가 생겨서 사이트가 깨질지 알 수 없다.1번과 같은 맥락으로, 모바일에서 사용하기 난처하다.모바일에는 기본적으로 네비게이션바, 노치 등이 포함되어 있으므로 100vh 등을 적용하면 페이지가 넘친다.02. 해결 방법해결방법은 간단했다.바로 innerHeight(innerWidth)와 props, 이벤트 리스너를 사용하..

01. 문제 상황리액트 프로젝트의 규모가 커져서 컴포넌트가 많아지고, 해당 컴포넌트가 사용하는 css파일도 많아질 경우 css의 속성을 관리하는것은 여간 귀찮은 일이된다.그래서 리엑트에서 CSS파일에서도 전역변수를 사용할 수 있는 방법을 찾아보고자 한다.02. 사용 방법1. scss 설치개발자들이 들으면 발작하는 말 중 하나가 이것이다.제가 사용하는 언어는 HTML, CSS에요! ^^...CSS는 언어가 아니라 마크업 문서이다. 고로 CSS에는 변수 따위가 존재하지 않는다.이를 해결하기 위해 우리는 SCSS를 사용할 것이다. 먼저 아래 명령어로 라이브러리를 설치하자.$npm i sassSASS는 CSS에서 변수를 사용할 수 있게 해주는 라이브러리다.변수 사용 이외에도 다양한 기능들도 있는 것 같은데 우선..

웹사이트를 구현하다 보면, 여러 URL에 대하여 각기 다른 페이지들을 넘겨줄 경우가 있다.다행히 리액트에서는 react-router-dom 라이브러리를 통해 이러한 기능을 제공한다.사용 방법을 바로 살펴보자.01. 라이브러리 설치npm install react-router-dom가장 먼저 라이브러리를 설치한다.02. Router.js 파일 만들기패키지 설치가 끝났으면 경로별로 어떤 컴포넌트를 넘길지를 처리해줄 라우터 컴포넌트를 만들어준다.이때 Router.js의 위치는 index.js와 같은 디렉토리에 만들어준다.Router.jsimport { BrowserRouter, Routes, Route } from 'react-router-dom';function Router({authorized, compon..

리액트에서는 properties 줄여서 `props`를 사용해서 변수를 전달합니다.props를 사용하는 방식에는 두가지가 있는데 간단하게 살펴봅시다.01. 기본 사용법App.jsfunction App() { return ( );}먼저 사용할 컴포넌트에 인자를 넘겨준다.Hello.jsconst Hello = function (props) { return Hello {props.name}! your age is {props.age} };export default Hello;이때, 인자를 넘겨줄 컴포넌트에서는 props라는 변수명을 가진 객체를 인자로 받는다.실행 결과02. 응용 사용법js의 구조 분해 할당 문법을 적용하여 다음과 같이 prop..

문제 상황export default function(){ let name = "Hayden" function showname(e){ name = name === "Hayden" ? "Nedyah":"Hayden" console.log(name) } return {name} btn1 }해당 코드를 살펴보자.해당 코드에서 의도한 바로는, 버튼을 클릭하면 name 변수 안의 값이 바뀌면서 화면에 표시되는 이름도 바뀌어야 한다.하지만 실제 실행 결과를 보면, 분명 변수에는 바뀐 이름이 들어 있는데 화면에는 이전 이름이 그래도 표시되는 것을 볼 수 있다.이는 변수의 바뀐 값을 렌더링해주지 않아서 발생하는 문제이다.이를 해결하기 위해 n..

이번에는 리액트에서 CSS 스타일을 적용시키는 방법들을 알아보려고 한다.하나씩 살펴보자.00. 사전준비./component/Hello.jsexport default function(){ return hello component}먼저 CSS 스타일을 적용시킬 컴포넌트를 정의해준다.App.jsimport logo from './logo.svg';import './App.css';import Hello from './component/Hello'function App() { return ( );}export default App;이후 해당 컴포넌트를 App Component에 추가해준다.01. In-line 방식으로 적용하기먼저 태그 안에 직접적으로 CSS 스타일을 명시하는 ..