state 사용해보기, 문자열 출력시키기

1. state 사용해보기

클래스 컴포넌트 내에서

state를 사용하는 방법으로는 3가지가 있다.

 

state란,

SPA 기능을 사용하도록 도와주는 문법이다.

SPA는 페이지를 새로고침 하지 않아도 표시되는 내용을

변경하여 반영해주는 기능인데,

useState로 상태를 생성하고,

이렇게 생성된 상태는 리액트에서 따로 관리하기에

만약 분류된 상태값이 변경될 경우

리액트에서 알아서 변경된 내용을 반영하게 해주는 것이다.

 

1. 바인드 이용하기

2. 이벤트 함수를 변수에 저장시켜 이용하기

3. 특정 함수로 따로 생성하지 않고 이벤트 적용 시에 원하는 동작 다 적기

해당 코드를 통해 실행시켜 본 결과

첫 화면

첫번째 방법 클릭 시

두번째 방법 클릭 시

 

세번째 방법 클릭시

다음과 같이 버튼을 누를 경우

숫자가 1씩 증가하는 모습을 통해

코드가 잘 실행됨을 알 수 있었다.

 

여기서 가장 중요한 점은

첫번째 방법을 사용할 때,

(첫 번째 사진 19번줄 참조)

this.hadleClick_1st = this.handleClick_1st.bind(this);

이 코드에서 괄호 안의 this라는 키워드가

반드시 들어가야 한다는 것이다.

만약, 이 코드에서 괄호 안의 this키워드가 빠지게 될 경우

에러가 나게 된다.

 

2. 문자열 출력시키기

이번에는 속성값으로부터 상태값을 지정해 문자열을 출력시켜보도록 하겠다.

 

이걸 위해서는 Props를 사용해주어야 한다.

Props는 컴포넌트 형태로 작성된 사용자 정의 태그에서도

속성 값을 전달할 수 있는 방법을 제공한다.

클래스 컴포넌트에서는 this.props라는 멤버변수가 이미 선언되었기에

이 변수를 통해서 값을 저장하거나, 읽어올 수 있다.

함수 컴포넌트의 경우

매개변수로 전달받는 방식이다.

선언 방식에서 약간 차이를 보일 뿐 사용법은 비슷하다. 

 

그럼 한번 만들어보겠다.

우선 클래스형 컴포넌트를 생성해주었고,

클래스형 컴포넌트로 출력시킴을 나타내기 위해

Class message 라는 문구도 같이 띄워주도록 하겠다.

그런 다음 함수형 컴포넌트를 생성해주었다.

(앞서 말했듯, 클래스형 컴포넌트에는 반드시 render( )라는 함수가 있어줘야 한다.)

그런 다음 위의 클래스형 컴포넌트와 마찬가지로

함수형 컴포넌트도 함수형으로 출력시킴을 나타내기 위해

Func Messaga 라는 문구를 같이 띄워준다.

 

 

 

실행시켜보면

 

다음과 같이 Class message: 와 Func Message는 

<h1>태그에서 출력하고자 한 바와 같이 출력됨을 볼 수 있고,

 

뒤의 클래스 메시지입니다. 함수로 전달합니다 문구는

출력을 위해 생성해둔 파일에서 지정한 문구로 출력됨을 볼 수 있다.

 

+++++

리액트에서 css 코드 적용시키기

 

우선 다음과 같은 css코드를 만들어주었다.

style.css파일

문제는 이걸 어떻게 리액트 파일에 적용시키냐이다.

 

2가지 방법이 있는데

첫번째는 해당 태그에 아이디 속성을 부여할 때

같이 css 속성을 집어넣는 경우,

두번째는 따로 css파일을 생성하여

사용하고자 하는 파일에 

(아이디를 선언해놓은 파일에) import 시키는 것이다.

나는 두번째 방법을 사용해보도록 하겠다.

 

위의 클래스형 컴포넌트에 4번줄을 추가시켜

저장해둔 style.css파일을 불러왔다.

 

실행시켜보면

다음과 같이 원래의 결과화면과 다르게

클래스형 컴포넌트 출력이 

css 속성이 적용되어 출력됨을 확인할 수 있다.