리액트 [생활코딩]

코스소개

 

위의 코드보다 훨씬 복잡한 코드의 경우 로직이 복잡해 지면 드는 생각이

태그를 간단하게 비슷한 부류끼리 묶는 다는 생각이 든다.

그리고 그걸 바로 리액트가 가능하게 해준다.   바로 아래와 같이 말이다.

 

 

리액트의 주요 기능은 사용자 정의 태그를 만드는 것이다.

사용자 정의 태그는 부품으로 사용된다.

 

 

 

리액트는 크게 클래스 방식과 함수 방식이 나눠지는데 최근은 함수 방식으로 주로 하기 때문에

함수 방식으로 공부를 해보자.

 

 

 

소스 코드 수정 방법

처음 리액트가 가동되면

index.js 파일을 찾고 거기서 부터 시작한다.

app 태그는 ./App이라는 파일에서 부터 왔다.

 

 

 

 

왼쪽 코드가 오른쪽 페이지를 나타내고 있다.

 

또한 app.css에 관련 css문법이 적혀 있으면서 적용이 된다.

 

 

index.js에서 랜더링 시 id값이 root인 태그로  랜더링 되라고 코딩 되어 있다.

 

 

 

그리고 그 id값이 root로 된 태그는 public폴더 안의  index.html에 있다.

 

 

배포

npm run build ==> 배포판을 만드는 빌드

 

그러면 build라는 폴더가 생기며 index.html에 공백 조차 없이 최적의 배포 파일이 생성된다.

 

그리고 serve라는 앱을 사용하여  serve -s build   한다.

-s라는 옵션을 통해 사용자가 어떤 경로로 들어던지 간에 index.html파일을 서비스 한다.

그리고 build라는 폴더명을 주면 그 폴더 내의 index.html을 사용한다.

 

 

컴포넌트 만들기

리액트는 사용자 정의 태그를 만드는 기술이다.

 

사용자 정의 태그 만들기 ==> 함수로 만든다.(반드시 대문자로 시작)

 

 

 

 

 

이렇게 왼쪽의 태그가 오른쪽으로 변경 !!

 

props

img와 같은 태그는 src,width, height와 같은 입력값을 가지고 있다.

 

우리의 사용자 지정 태그도 입력값을 가지게 만들어 보자==> 그 입력값(속성)을 props이라고 한다.

 

이렇게 props를 콘솔로 찍어보면 객체가 있고 그 객체 내부에는 인자로 준 title을 키로 가진 객체라는걸 알 수 있다.

중괄호를 사용!!

 

이벤트

onclick이라는 이벤트 

 

우리의 사용자 지정 태그도 이벤트기능을 가지게 만들어 보자

 

우리가 만든 사용자 지정 태그에props로 onChangeMode라는 이벤트를 등록하고 이벤트 발생시 alert이 발생하는 함수를 props로 등록.

 

 

prventDefault를 사용해서 리로딩이 일어나지 않도록 한다.

그리고 props으로 함수가 전달 되었을 그 함수 호출 한다.

 

 

 

 

 

 

state

props과 함께 컴포넌트 함수를 실행시켜 새로운 리턴값을 만들어주는 데이터가 state이다.

 

 

props와 state모두 값이 변경되면 새로운 UI를 만드는 공통점이 있다.

 

차이점 

props : 컴포넌트를 사용하는 외부자를 위한 데이터

state :  컴포넌트를 만드는  내부자를 위한 데이터

 

 

 

 

 

mode의 값이 바뀌는 app이라는 컴포넌트 함수가 새로 실행 되면서 리턴값이 만들어 지고 그 리턴값이 UI에 반영되는 걸 꿈꾼다.

 

이때 바로 state를 사용한다.

 

 

 

 

 

 

 

 

 

useState라는 훅을 사용해야한다.

 

 

상태를 생성하고 콜솔로 찍어보면 0번째 원소에  welcom이 고 1번째 원소는 함수 이다.

즉, useState는 배열을 리턴하고, 그 배열의 0번째는 상태의 값을 읽을 , 1번째는 그 상태의 값을 변경할 떄 사용하는 함

 

mode를 통해 상태의 값을 읽고

setMode라는 함수를 사용해 상태를 변경할 수 있다.

 

주로 밑에 있는 코드 한줄로 위의 세 줄의 코드를 대신한다.

 

그리고 값을 변경하기 위해 함수를 사용 !

그러면 App 컴포넌트가 다시 실행된다.

그리고 useState가 값을 수정한다.