문제 const MyButton = () => { return ( ) } export default MyButton; MyButton이라는 하나의 컴포넌트가 있다. 이 컴포넌트의 용도는 사이트 여기저기에서 버튼 역할을 수행하고자 한다. 버튼도 버튼마다 역할이 있고, 기능이 다르기 때문에 컴포넌트도 이에 따라 여러 개 만들어야 한다고 생각할 것이다. 하지만, 리액트에는 Props라는 혜자 기능이 있기 때문에 1개의 컴포넌트로 씹고 뜯고 맛보며 제대로 뽕을 뽑을 수 있다. 또한 CSS 스타일링 역시 각각 버튼의 기능마다 다르게 줄 수 있다. 바로 Props를 이용해서 말이다. 해결 import {MyButton} from "./Components/MyButton"; const Home = () => { re..
준비 우리가 리액트를 사용하는 이유는 간단하다. 바로 싱글 페이지 애플리케이션(SPA)이 웹 개발에서 매우 효율적이기 때문이다. SPA가 무엇인지 간단히 설명하자면 원래 사이트 간 이동을 할 때 새로고침 하듯이 깜박거리며 사이트가 이동하는 게 일반적이었다. 하지만, 이는 속도나 서버 가성비 측면에서 매우 비효율적인 방법이었고, 이를 극복하기 위해 리액트같은 프레임워크가 등장하면서 사이트 이동 시 필요한 부분만 효율적으로 받아서 출력하는 방식으로 바뀌게 된 것이다. $ npm install react-router-dom --save 앞에서 말한 SPA를 만들기 위해서 React Router라는 라이브러리를 먼저 설치해주어야 한다. 방법 컴포넌트 경로 설정하기 import {BrowserRouter, Rou..
문제 자바스크립트의 타입 중 undefined와 null은 공통적으로 '값을 가지고 있지 않은 상태'라는 뜻을 갖고 있다. 하지만, 우리 같은 초보 코린이들에게 다르게 생긴 두 개의 값이 하나의 같은 뜻을 가지고 있다는 건 매우 헷갈리는 문제이다. 따라서 undefined와 null이 무엇이 같고 무엇이 다른지 일목요연하게 정리할 필요가 있다. 비교 let a; console.log(a); // undefined undefined의 경우 변수를 선언할 때 변수에 아무런 값을 넣지 않은 경우 undefined가 변수의 '값'으로서 할당된다. 즉, 변수 a는 아무것도 선언한 것이 없지만 사실 따져보면 undefined라는 값이 a에 할당되어 있다고 보면 된다. 이것은 개발자가 의도적으로 할당한 값이 아닌 자..
개념 SCSS에서 변수는 $변수명: 값의 형태로 간단히 선언할 수 있다. 또한, 당연히 1개의 변수에 1개의 값만 저장할 수 있었다. 하지만, get-map() 내장 함수를 사용하면 1개의 변수에 여러 개의 값을 선언할 수 있다. 마치, 자바스크립트의 배열이나 객체처럼 말이다. 방법 $color: ( primary: #333, secondary: #666, focus: #ff0000 ); body { color: get-map($color, primary); } h1 { color: get-map($color, focus); } 먼저, 변수를 선언하는 방법은 $변수명: (변수1: 값1, 변수2: 값2...)의 형식으로 선언해주면 된다. 참고로 변수를 선언할 때 주의할 점은 중괄호{}가 아닌 소괄호()라는..
개념 앞에서 배운 @mixin과 비슷한 기능을 가진 문법이 있다. 바로 @extend이다. 어떻게 쓰이는 지는 바로 예시를 통해 알아보자. 방법 @extend 클래스(.) 사용 /* SCSS */ .btn { border: 1px solid #000; background-color: #fff; width: 150px; line-height: 30px; outline: none; cursor: pointer; color: #fff; } .a-btn { @extend .btn; background-color: skyblue; border-color: blue; } /* Compiled CSS */ .btn, .a-btn { border: 1px solid #000; background-color: #fff;..