특별한 일상

안녕하세요. 소다맛사탕 입니다. 오늘 포스팅에선 기존 자바스크립트 jQuery를 이용해 구현한 지난 포스팅 '[javascript] 체크박스 전체 선택/해제'를 리액트 컴포넌트를 이용해 체크박스 선택/해제 하는것을 구현 하려고 합니다. ※ React Component 란? 특정 기능을 가진 법용적인 '부품'을 나타내는 용어로 개발자가 원하는 형태로 쉽게 UI 부품을 설계할 수 있습니다. 리액트에서 컴포넌트의 사용법은 기본적인 컴포넌트 클래스를 상속받을 수 있게 해주는 React.Component와 컴포넌트를 사용할 때의 태그 요소인 this.prop라는 객체 자료형으로 이루어진 방식입니다. 예_) 리액트로 컴포넌트를 만든 예시를 보여주기 위해 위와 같은 예시를 구현했습니다. 그럼 본론으로... 리액트 컴..

지난 포스팅 이었던 '[REACT] 리액트 JSX 태그 내부에 변수 넣기(React JSX in InnerTag)' 에 이어서 오늘은 JSX로 스타일 속성을 지정하는 방법을 알아보겠습니다. 기본적으로 DOM속성으로 뷰의 스타일을 지정할때 속성을 사용하는데... JSX에서 이 스타일 속성을 문자열로 지정할 수 없습니다. 스타일 속성으로 CSS 속성과 값을 객체로 지정해야 합니다. const param = {prop1 : value1, prop2 : value2, prop3 : value3 ...} const domStyle = ... 그럼 예시를 통해 더 자세하게 알아보겠습니다. 예시는 홈페이지 형태입니다. render()를 3개로 구분하여 header, contents, footer 영역으로 만들어서 홈..

안녕하세요. 소다맛사탕 입니다. 리액트는 템플릿처럼 사용할 수 있는데 이번 포스팅에선 JSX 태그 내부에 변수를 넣는 방법에 대해 알아 보겠습니다. JSX로 HTML 태그를 작성할 때 변수와 함수를 태그 내부에 사용할 수 있는데. 이를 테면... 이와 같습니다. {value} function 작성 HTML 태그 내부에 자유롭게 변수와 상수를 넣는 방법 JSX로 속성 값을 작성할 때는 큰따옴표가 아니라 중괄호를 사용하면 됩니다. a태그 요소의 href에 url을 집어넣게 되면 해당 url로 이동하는걸 확인할 수 있습니다. 다음은 함수를 선언하여 HTML 내부를 변경하는법 입니다. ※ 주의 사항(JSX를 사용시 발생하는 오류) // 오류1 function fncDom() { return 안녕하세요? func..

안녕하세요. 소다맛사탕 입니다. 이번 포스팅은 일반적인 HTML과 DOM 환경에서 리액트를 사용하는 방법에 대해 알아 보겠습니다. 리액트의 기본적인 사용법 기본적으로 HTML, DOM 환경에서 jQuery를 사용하는 CDN을 설정하는 것과 같이 리액트 라이브러리를 읽어 들이는 스크립트 즉, CDN을 선언해야 합니다. 앞의 두 줄은 리액트 라이브러리, 마지막 줄은 자바스크립트 문법 구문을 확장한 것입니다. 말 그대로 기본적으로 HTML에서 javaScript를 선언하게 되면 라는 형식으로 시작을 하는데 리액트 구문을 실행시키기 위해서는 를 선언해 JSX를 활성해야 합니다. JSX 란? 자바스크립트 안에서 HTML 문법을 사용해 VIEW를 구성할 수 있게 도와주는 자바스크립트 문법. 간단하게 모든 프로그래밍..