jsx
-
React 기본 : React State 개념, JSX문법, Babel컴퓨터 알아가기/React 2021. 6. 29. 19:30
본 내용은 ZeroCho TV의 React 무료강좌를 기준으로 작성하고 있습니다. 지난 시간 '좋아요'버튼의 코딩과 브라우저는 다음과 같았습니다. 상기 브라우저의 State는 클릭을 하면 True로 바뀌는 반응을 개발자도구(F12)를 통해 확인할 수 있었습니다. 그렇다면 화면에 클릭을 하면 Like 에서 Liked로 바뀌는 작업을 하도록 하겠습니다. 이렇게 변경이 되는 것을 State로 보면 됩니다. 화면에 직접 그려진다는 것은 Render( ) 함수내에서 이루어진다고 말씀 드렸습니다 . return a("Button", {onClick }, "Like") 이렇게 3구역으로 나뉘어진 곳에 마지막 3번째 "Like"에 다음과 같이 코딩을 합니다. 상기 코딩은 클릭을해서 현재상태가 liked가 참이면 화면에..
-
React 기초 : 기본구조컴퓨터 알아가기/React 2021. 6. 3. 15:20
오늘은 React 기본구조를 한번 보도록 하겠습니다. 저처럼 프로그램의 깊은 지식이 없는 분들은 어떤 구조로 어떻게 움직이는지 전혀 감을 잡을 수 없습니다. 일단 가장 기본적인 뼈대부터 이해를 하고 가야겠습니다. 설명이 100% 맞을 수 없지만 웹사이트를 만드는 프레임은 HTML, 그 프레임을 꾸며주는 스타일링은 CSS, 그리고 주요 기능을 작동하게 만드는 프로그램인 JvaScript로 구성이 되는데 이 JavaScript를 효과적 효율적 프로그래밍이 가능하게 만드는 언어가 React라는 개념으로 보겠습니다. ▒ React 기본 구조 Codepen에서 개발환경을 설정하였으니 그 곳에서 시작을 해 보도록 하겠습니다. HTML CSS JS(Babel)환경이 설정 되어 있으니 각 section에서 코딩을 해 ..