Web/React.js

[React.js] Props / State / 생명주기

Props Props(Properties의 줄임말)는 컴포넌트에 전달하는 속성과 같은 것으로, 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체이다. 컴포넌트는 전달받은 Props에 따라 표시하는 스타일과 내용을 변경한다. Props 학습 준비 먼저 이전 포스팅에서 계속 작업하던 폴더에 ColoredMessage라는 이름으로 컴포넌트를 만들고, 아래 코드를 작성해 준다. 🔽 ColoredMessage.js export const ColoredMessage = () => { const contentStyle = { color : "red", fontSize : "20px" }; return 안녕하세요! }; 🔽 ColoredMessage 임포트 import { ColoredMessage } fr..

[React.js] 이벤트와 스타일

리액트에서 이벤트를 실행하는 방법과 스타일을 적용하는 방법을 배워보자.😊 이벤트 취급 방법 리액트에서는 이벤트 등을 캐멀 케이스로 작성한다. 💙 캐멀 케이스 표기법 onclick ❌ onClick ⭕ onchange ❌ onChange ⭕ 그리고 JSX에 작성되어 있는 HTML과 같은 태그 안(return 이후 등)에서는 { }로 감싸서 자바스크립트를 작성한다. 이를 바탕으로 버튼을 클릭했을 때 alert가 실행되는 기능을 구현하면 다음과 같다. 🔽 alert 기능 구현 // App.js export const App = () => { // 버튼 클릭 시 실행되는 함수 정의 const onClickButton = () => { alert(); }; return ( Hello! 안녕하세요! 버튼 ); };..

[React.js] JSX 표기법 / 컴포넌트 사용 방법

JSX 표기법 리액트는 JSX 표기법을 사용한다. JSX는 영어로 다음과 같은 의미를 갖고 있다. A syntax extension jo JavaScript. 문장을 그대로 해석해 보면 자바스크립트의 확장 문법이라는 뜻이다. 그럼 문법을 어떻게 확장한 것일까? JSX는 JavaSciprt와 XML/HTML을 합친 것이라고 보면 된다. JSX의 X는 extension의 X로 볼 수도 있지만 실제로는 JavaScript and XML의 앞 글자를 따서 JSX라고 부르는 것이다. 먼저 리액트 프로젝트를 만든 뒤 src 폴더 안에 있는 파일을 모두 삭제하고, index.js를 새로 만든다. index.js에 리액트 기반을 작성하면서 JSX에 관해 알아보자. 먼저 react-dom 라이브러리에서 ReactDom이..

[React.js] React 란? / 리액트 개발 시작하기

React (리액트) 란? 리액트(React, React.js 또는 ReactJS)는 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리이다. 구조가 MVC, MVW 등인 프레임워크와 달리, 오직 V(View)만 신경 쓰는 라이브러리이다. 💬 라이브러리 : 자주 사용되는 기능을 정리해 모아 놓은 것 React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org 리액트의 특징 1. Component-Based (컴포넌트 기반) 리액트는 컴포넌트 기반의 UI 라이브러리이다. 컴포넌트란 독립적으로 존재할 수 있는 UI요소, 페이지에서 화면을 이루고 있는 구성 요소를 의미..