react 시작 - HTML,CSS 적용 / Hooks, useState / onClick, onChange

react 시작

 

한달간에 HTML, CSS, JavaScript의 기본지식을 공부하고.

이제 본격적인 프론트엔드 강의를 시작했다.

 

가장 먼저 시작한 새로운 언어는 react 이다.

 

react(리액트)는 컴포넌트(component)라고 불리는 작은 부품으로 복잡한 UI를 구성할 수 있었다.

.html이나 .css 파일이 아니라 .js 안에서 모두 해결할 수 있으니 쉬워 보였지만 역시 처음 보는 것은 매우 어색했다.

 

우선 기본 셋팅을 진행했는데 각 폴더 및 파일들을 간단하게 정리했다.

 

1. node_modules : 불러온 기능들
2. pages :프론트엔드 화면 및 웹뷰 - HTML 파일과 JS 파일이 JS로 합쳐짐
3. _app.js : 모든 페이지의 공통설정들을 여기서 진행합니다.
4. public : 사진,아이콘 등을 저장해놓음(폴더명은 마음대로 변경 불가)
5. styles : css 파일
6. .gitignore : git 업로드시 제외할 파일
7. package.json (기본 매뉴얼) - 프로그램을 실행시키는 설명서
8. README.md 상세 설명서 : 내가 만드는 메뉴얼
9. yarn.lock : 버전 잠금 파일 (버전 기록)

 

작성했지만 아직 모든 파일을 직접 뜯어보진 못했다.

 

모두 필요한 파일이지만 gitignore에 들어있는 파일은 git 업로드에서 제외된다는 점은 기억해둬야할 것 같다.

 

 

react 로 페이지 만들기

 

처음으로 리액트로 만든 게시글 등록 페이지이다. 

 

Go Live가 아니라 package.json에 있는 dev로 페이지를 열어야하므로 터미널에 package.json이 있는 곳으로 이동해야한다.

 

1. 터미널에서 cd 파일명/ or cd .. 등 으로 이동

2. package.json이 있는 폴더에서 yarn dev 입력 

 

이후 localhost:3000에서 pages에 저장해놓은 폴더로 이동하면 페이지를 열 수 있다

 

나는 pages/num1/20230109 안에 index.js를 저장해놓았다 (HTML 자료)

 

HTML 과 CSS에 적용

 

리액트는 HTML과 달리 내가 직접 태그를 만들어 사용 할 수 있다. 

1. 태그명을 정한다.

2. import에 태그명을 넣고 css 파일에 추가한다.

3. 태그를 사용한다.

 

내가 CSS를 적용한 태그들이 무수히 많이 나올 수 있다. 

내가만든태그명들

 

기본 셋팅 방법은 아래를 참고 할 수 있다.

pages 내부의 HTML,JS 파일 

 

import { 새로만든태그명1, 새로만든태그명2 } from "css 파일경로" 

import { useState } from "react";

 

export default function EmotionPage() {

// 여기는 자바스크립트 쓰는 곳

     return (

// 여기는 HTML 쓰는 곳

 

);

}

styles 내부의 CSS 파일 

//설치한 emotion을 사용하기 위해 import로 불러와야합니다.

import styled from "@emotion/styled";

export const Container = styled.div`

 // 여기는 CSS 쓰는 곳

`;

리액트를 활용한 페이지

 

추가로 게시물을 만들면서 알게된 css 속성이 있다.

맨 하단에 메인 설정에 유튜브 / 사진을 input radio로 만들었는데 해당 태그에 accent-color를 사용하여 선택했을때 색깔을 변경할 수 있다.

 

export const ContentInp = styled.input`

accent-color: #ffd600;

`;

 

 

 

JavaScript에 적용

HTML과 CSS를 리액트 컴포넌트로 활용 하였고, 이제 JavaScript를 활용해보자

js로 html을 제어하기 위해서는 

document.getElementByID("").innerText = "~~" 등으로 사용 해야했는데 

리액트에서 짧게 줄일 수 있었다.

 

import { useState } from "react";

위에 작성한 useState 기능을 불러왔기 때문이다.

리액트의 Hooks 를 사용하면

변수 선언방식이 달라지지만 활용하면 코드의 길이를 많이 줄일 수 있다.

 

* Hooks 란?
: use로 시작하는 애들 (useState, useEffect, ... 등)
useState 란?
: State를 만들어주는 아이 / 리액트를 다운받아야 사용 가능합니다
State 란?
: Component(컴포넌트) 전용 변수(let, const 같은 변수)

 

 

변수 만드는 방법 비교
기존 방법 :

let const = 0  혹은 const count = 0

State 사용 방법 : 

const [count(변수명),setCount(변수바꾸기)] = (변수만들기)useState(0[초기값])

변수 바꾸는 방법 비교
기존 방법 : 

let count = 0 --변경--> count = 5; / const count = 0; --변경--> 변경 불가

 

State 사용 방법 :

const[count,setCount] = useState(0) --변경--> setCount(5)

설명을 보면 헷갈리지만 실제 코드를 보면 훨씬 간단하게 만들 수 있다.
 

기존 js에서는 태그에 id값을 주어 변환하였지만, State 방법은 내용에 변수명을 입력하여 사용한다.

 

그래서 초기값부터 재할당되는 값까지 쉽게 바꿀 수 있다.

 

js 적용 

 

 

<button onClick = {함수명}>

<input onChange = {함수명} / > : HTML 요소의 값이 변경 될 때 마다 발생한다.

 *함수명은 보통 앞에 이벤트이름+기능 을 넣는다 

 

onClick은 버튼 누를때마다 발생하는 함수로 비교적 바로 함수에 적용 할 수 있다.

이번에 사용한 onChange는 input에 요소를 입력할 때 마다 변경되는 값을 파악하기 위해서 아래 작업이 필요하다.

 

function onChangeName(event) {

   setName(event.target.value);

}

//name이라는 변수에 event.target.value를 재할당하고있는 onChangeName 함수

 

이것은 email에 @가 있는지 없는지 구분할때 사용하거나, pw1와 pw2가 같은지 구분할때도 사용할 수 있다.

 

 

export default function SighUpState() {

 

        const [email, setEmail] = useState(""); 

        const [emailError, setEmailError] = useState("");

        function onChangeEmail(event) {

            setEmail(event.target.value);

        }

       function onClickSighUp() {

           if (email.includes("@") === false) {

           setEmailError("이메일에 @가 없습니다.");

       }

       <div>

            이메일 : <input type="email" onChange={onChangeEmail} />

       </div>

       <Error>{emailError}</Error>