화성갈끄니까아

State와 Props를 알기 전에 Hook에 대하여 먼저 알아보자! React Hooks 리엑트 v16.8부터 새롭게 도입된 기능으로써 과거에는 클래스형 컴포넌트를 사용하였다. 클래스의 사용은 코드의 재사용과 구성을 어렵게 만들었으며 Reloading의 신뢰성을 떨어뜨리는 단점이 존재하였다. 따라서 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있는 훅이 탄생하였으며 대표적으로 useState와 useEffect를 사용하여 lifecycle과 연동 같은 기능을 사용 가능하게 함으로써 리엑트에서 가장 중요한 기능 중 하나가 되었다. Before Using Hooks 훅은 함수 컴포넌트 내에서 항상 최상단에 호출해야 한다. 리엑트 함수 컴포넌트 내에서만 훅을 호출해야하며, 일반 자바스크립트 함수에..

Saas란? 웹 디자인 공부를 시작하다보면 CSS는 흔히 접하고 있을 것이다. CSS 코드가 길어질수록 복잡해지며 수정작업이 필요할 경우 매우 불편하다는 점이 있다. 동일한 코드를 재사용 하려면 복사/붙여넣기의 방법 뿐이며 실수를 유발할 수 있는 가능성이 아주 높은 단점이다. 따라서 Saas는 이를 보완하기 위하여 탄생하였다. Saas는 컴파일 과정에서 CSS파일을 생성해주는 전처리기 역활로써, 안정적이고 확장성이 좋은 특징을 가지고 있다. Saas 사용 다음 명령어를 통해 Saas를 우선 설치해주자 npm install sass * 설치 명령어를 입력한 뒤 항상 package.json파일에서 설치가 되었는지 확인하자! CSS파일의 확장자를 .scss로 변경하자 -> 아이콘이 바뀌는 것을 발견할 것이다...

라우팅(Routing)? 라우팅은 경로에 따라 다른 화면을 보여주는 것이다. 리엑트는 단일 페이지(SPA) 형식이기 때문에 여러 개의 페이지를 보여주기 위해선 다른 페이지로의 이동이 계속해서 필요한 것이다. 리엑트에는 이러한 기능이 없기 때문에 라우터를 따로 설치해야 한다! 이러한 점에서 확실히 리엑트는 프레임워크가 아닌 라이브러리라는 것을 알 수 있다! 리엑터 라우터? 앞서 언급하였듯이 라우팅을 위해서 리엑터 라우터를 설치해주자! 다음 예시와 같은 명령어로 리엑터 라우터 설치가 가능하다. 라우터 컴포넌트 연결 라우터 컴포넌트 구성은 다음과 같다. 사용되지 않은 컴포넌트는 주석처리 하였다. index.html에서 화면을 보여주고 있는 js파일에 컴포넌트 사용과 동일한 방법으로 을 하게되면 라우터가 가리키..

JSX란? 리엑트에서 사용하는 문법으로써 자바스크립트의 확장 문법이다. 리엑트로 웹 개발하기 위해서는 JSX에 익숙해지자! JSX 기본 문법 JSX를 작성하는 경우에는 반드시 하나의 요소로 감싸주어야 한다. div를 만들어 부모태그를 생성할 수 있지만 div태그가 무분별하게 생성되면 시멘틱 웹으로써의 의미가 떨어지기 때문에 or 를 사용하여 부모태그를 대신해주자. (최상단에 부모태그가 존재할 경우 굳이 사용할 필요는 없다.) 셀프 클로징(self-closing) HTML을 사용하였을 때는 input, br ,img와 같이 닫는 태그가 없는 태그들이 있지만 JSX에서는 반드시 닫아줘야한다. 이를 셀프 클로징이라고 부른다. 속성명 카멜 케이스(Camel Case) 표기법으로 작성 HTML 속성들인 oncli..

리엑트(React)란 무엇일까? Facebook에서 개발한 라이브러리로써 리엑트를 쉽게 표현하자면 자바스크립트의 라이브러리의 하나로서 UI를 제작하기 위해 사용되는 싱글 페이지 어플리케이션(SPA)이다. 왜 리엑트를 사용할까? 기술이 발전할수록 웹이 점점 복잡해지면서 사용자의 요구 또한 많아지고 높아짐에 따라서 자바스크립트의 한계점을 보안하기 위하여 새로운 프레임워크인 앵귤러(Angular), 뷰(Vue), 리엑트(React)가 탄생하였다. 자바스크립트의 한계점을 보완한 라이브러리이기에 리엑트는 자바스크립트의 문법을 그대로 활용하는 특성을 지니고 있다. 따라서 앵귤러, 뷰 보다는 상대적으로 배우기에 쉽다. 리엑트 특징 선언적 개발이 가능하다. 선언적 개발은 흔히 명령적 개발이라는 프로그래밍 기법과 대조되..

이벤트는 무엇일까? 웹에서 이벤트란 쉽게 말해서 사용자가 버튼을 클릭하였을 때 그에 맞는 반응이 일어나는 현상을 이벤트라고 한다. 일반적으로 자바스크립트에서 함수를 통하여 이벤트를 연결하며 이벤트를 제어하는 함수를 이벤트 핸들러(Event Handler)라고 한다. 대표적인 이벤트 종류 UI Event scroll = 사용자가 페이지를 스크롤할 경우 select = 텍스트를 선택하였을 경우 resize = 사용자가 페이지의 크기를 조절하는 경우 Keyboard Event keydown = 키를 누르고 있는 경우 keyup = 키에서 손을 뗐을 경우 keypress = 키를 눌렀을 경우 keyCode = 키 코드값 Mouse Event click = 클릭하였을 경우 dbclick = 더블 클릭하였을 경우 ..