반갑다 React

Westagram을 CSS와 HTML로 겨우겨우 끝마친뒤 React 를 만났다. 다들 어렵다고 하지만 나한텐 모든게 어렵기 때문에 두렵지 않았다....

React란??

React는 사용자 인터페이스를 만들기 위한 라이브러리입니다. React는 프레임워크가 아니고, 심지어 웹에만 사용할 수 있는 것도 아닙니다. React는 다른 라이브러리들과 함께 특정한 환경을 렌더링하는 데 사용됩니다

웹을 만들기 위해서 사용자는 React를 ReactDOM과 함께 사용해야 합니다. React와 ReactDOM은 다른 실제 웹 프레임워크들과 동일한 공간에서 논의되고 동일한 문제를 해결하기 위해 사용됩니다. React를 "프레임워크"로 지칭할 때는 통상적인 뜻으로 받아들이면 됩니다.

리엑트의 특징

리엑트는 자바스크립트와 html 이 섞여있다고 생각하면 된다. 혼자서 셀프클로징</> 할수 있는 능력도 있따

### :: Node.js

Node.js 는 자바스크립트가 브라우저 밖(ex. 서버)에서도 동작하게 하는 환경을 의미한다. 리액트 애플리케이션은 웹 브라우저에서 실행되는 코드이므로 Node.js와 직접적인 연관은 없지만, 프로젝트를 개발하는 데 필요한 주요 도구들(ex. 바벨, 웹팩)이 Node.js 기반이기 때문에 반드시 설치해야 한다. Node.js를 설치하면 npm(node package manager) 이 자동으로 설치 되는데 npm을 사용하기 위해서는 노드(Node.js)가 설치되어 있어야 한다. 터미널에서 아래의 명령어를 실행 함으로써 Node.js 의 버전을 확인할 수 있다. 노드 버전이 정상적으로 확인되면 설치도 정상적으로 이루어진 것이다.

> React Router

1.Routing

• **라우팅(Routing)**이란 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것 입니다.
  2.SASS
  Css를 React 형식으로 바꿔준 걸 SASS라고 한다. Sass의 가장 기본적인 기능으로 Nesting 이라는 것이 있습니다. JSX 최상위 요소의 className을 컴포넌트 이름과 동일하게 설정해주고, .scss 파일에서도 최상위 요소 안 쪽에서 하위 요소의 스타일 속성을 정의하면 다른 Js 안에있는 같은이름의 ClassName 과 섞이지않고 본연의 css를 적용할 수 있도록 도와준다!!.
  여기엔 변수활용과 연산자,Mixin 등등 여러 가지의 기본기능을 적용할 수 있다. 아직 본인은 해보지않았지만 !! 이걸 참조해서 열심히 해볼려고한다!!

$theme-color: blue;
$border-style: 1px black solid;

@mixin flex-center {
	display: flex;
	justify-content: center;
  align-items: center
}

login-container {
  @include flex-center;

	button {
	  width: 200px;
		height: 100px;
		background-color: $theme-color;

		&:hover {
			background-color: red;
			cursor: pointer;
		}
	}

	input {
		background-color: $theme-color;

		&:focus {
		  background-color: red;
		}
	}
}

**이런식으로 더욱더 시간을 줄이고 더욱 더 쉽게 쓸 수있는 코드로 멋지게 변신하게 된다.  **