K-Pen, 리액트 기본 코드? 외울 필요 없어요!

리액트 기본 코드

리액트 코딩 언어를 시작하면 항상 만나는 코드가 있습니다.

바로 아래와 같은 코드인데요.

웹 브라우저 화면에 "안녕, 리액트 👋"를 표시해주는 간단한 소스입니다.
코딩을 처음 시작하는 입장에서는 10줄이나 되는 코드가 아마 부담스러우실 거예요.

하지만 이런 코드는 한번 보고, 두번 보고, 10번, 100번 앞으로 계속 눈으로 보면서 자연스럽게 그 구조가 머리속에 들어올 겁니다. 전혀 외우거나 하실 필요가 없어요.

처음 리액트 언어로 코딩할 때 우리가 수정할 부분은 단지 이 부분과,

이 사이 부분이지요.

물론 나중에 기능이 고도화된다면 복잡해질 수는 있습니다.

K-Pen 에서는 언제든지 기본 코드를 설정하고 싶다면,
1) 햄버거 메뉴를 클릭하고
2) 예제 불러오기의 '기본'을 선택하시면,

짜잔, 기본 코드가 자동으로 세팅되지요!

그냥 문서 편집하듯이 수정

만일 화면에 표시하는 문구를 바꾸려면 <div> 와 </div> 사이에 문구만 바꾸면 됩니다.
'안녕, 리액트' 문구를 '안녕 케이펜으로 바꾸면 ( 그냥 문서 편집하듯이 편집하시면 됩니다 )

오른쪽 결과 화면도 함께 따라 바뀝니다.

태그도 가능해

HTML 태그도 지원하는데요. HTML 태그를 모르셔도 상관은 없습니다.
'안녕, 케이펜' 앞뒤에 <marquee> 와 </marquee> 태그를 입력해 보세요.

그러면 문구가 이렇게 하염없이 흘러가는 걸 구경하실 겁니다.
HTML 태그 기본 기능입니다^^

버튼을 넣어볼까? 자동완성으로 쉽게 쉽게!

만일 클릭할 수 있는 버튼을 배치하고 싶다면,
<button> 태그를 넣어주시면 되는데요.

입력하실 태그 모양은 아래와 같습니다.

<button>클릭해!</button>

그런데 이걸 다 타이핑하실 필요는 없어요.

button 만 타이핑하고, TAB 키를 치시면 자동 완성됩니다.
그리고 들어갈 문구만 타이핑하시면 되는 거지요.
요새 개발 추세가 적게 타이핑하는 문화거든요 ㅎㅎ

결과는 이렇게 버튼이 표시되었습니다.

클릭하면 뭔가 알려줘!

하나 더 해보죠. 저희집 강아지가 외출할 때면 '왈왈' 짖곤 하는데요.
버튼을 클릭하면, '왈왈' 메시지를 표시해보겠습니다.
여러분은 여러분만의 문구로 바꿔서 시도해 보세요^^

버튼에 클릭 기능을 심으려면 아래 태그를 사용하시면 되는데요.
기본 자바스크립트를 아시는 분은 약간 사용법이 다르니 혼동 없으시길!
특히 대소문자 요주의! ( onClick 에서 C는 대문자입니다. )

<button onClick={() => alert('문구')}>...

버튼을 클릭해볼까요? 이렇게 나오면 성공!
안되시는 분은 코드 전체 내용을 복사해서 댓글로 남겨 주세요!

마무~리!

버튼을 클릭하면 문구를 표시하는 건 쉬운 기능입니다.
만일 버튼을 누르면 뭔가 화면에 변화가 생기거나 계산을 실행하는 것은 어떨까요?
리액트는 그런 기능을 위해 '상태 관리'라는 걸 사용하는데요.
오늘 내용보다는 조금 ( 아주 쪼금 ) 복잡합니다.

다음 시간에 다뤄보도록 하겠습니다 ^^

코딩에 관심 가시는 분들에게 흥미로운 컨텐츠가 되셨을지 모르겠네요.

오늘도 방문 감사합니다!

---

성경 말씀 한절 공유드립니다.
말씀은 영혼을 치유하고 강하게 합니다.
여러분의 영혼이 더욱 강해지시길 소망합니다!

내가 네게 명령한 것이 아니냐 강하고 담대하라 두려워하지 말며 놀라지 말라 네가 어디로 가든지 네 하나님 여호와가 너와 함께 하느니라 하시니라.

- 여호수아 1:9 -