소소한 기록

컴포넌트라는 말이 조금 어렵게 느껴질지 모르겠습니다. 구성요소, 부품, 레고블록 등의 여러 해석 중에 '부품'이라는 말을 쓰면 좋을 것 같습니다. 부품들을 조립해서 물건을 만드는 것처럼, 컴포넌트를 조립해서 프로그램을 완성할 것이기 때문이죠. 리액트에서 사용하는 컴포넌트는 HTML로 대체되는 부품입니다. javascript를 사용해서 부품 기능을 만들고, CSS를 이용해서 부품을 예쁘게 만듭니다. 잘 만든 부품들을 조립해서 최종결과물을 만듭니다. 자동차를 만들 때 엔진, 에어컨, 바퀴등을 각각 만들어서 하나로 조립하는 걸 생각하시면 됩니다. 다만 실제 자동차 조립과 다른 점은 실제 자동차는 바퀴를 네 개 만들어야 하지만, 프로그래밍에서는 하나의 바퀴 컴포넌트를 만들어서 무한대의 바퀴를 만들어 쓸 수 있습..

JSX(JavaScript for XLM)는 javascript 구문을 조금 확장한 것이라고 생각하시면 됩니다. HTML과 javascript를 섞어서 쓸 수 있습니다. 주로 리액트에서 많이 사용됩니다. 예전에는 웹을 만들 때, 화면구조와 내용은 HTML, 디자인은 CSS, 로직은 javascript로 나눠서 만들었습니다. 파일도 별도로 관리됐죠. 그런데 웹이 더 복잡해지고, 상호작용도 많아지면서, 로직에 따라 다른 HTML을 보여주는 상황이 늘어났습니다. 그래서 javascript가 바로 HTML을 다룰 수 있도록 JSX가 나타났습니다. // JSX 구문 const element = ( Hello, world! ); // javascript 구문 const element = React.createEle..

JSX는 리액트에서 화면을 표시할 때 사용하는 문법입니다. const element = Hello, world!; 구조는 이렇게 생겼죠. 윗줄이 다 JSX가 아니고 Hello, world! 이 부분만 JSX문법입니다. HTML과 똑같이 생겼죠? HTML과 다른 점은 JSX내에 중괄호({})를 이용해서 값을 입력할 수 있다는 것입니다. const name = 'Josh Perez'; const element = Hello, {name}; 이렇게 사용할 수 있습니다. function formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'Harper', lastName: 'Perez' }; cons..

공식 사이트 페이지 : http://devapps.gnu.ac.kr:1201/nxui/index.html const element = Hello, world!; 여기 선언문이 하나 있습니다. 프로그램을 조금 아시는 분이면 이상함을 느끼실 겁니다. 전 못느꼈지만... element 라는 변수에 값을 할당하는데, 이건 문자도 아니고 html도 아니네요. 문자라면 따옴표로 감싸야 하고, 자바스크립트 내에 html 태그를 바로 쓸 수는 없으니까요. 어쨌든 결과를 말씀드리면, 이 수식은 맞는 표현이고, 이렇게 쓰는 방식을 JSX라고 합니다. JSX의 풀네임은 'JavaScript XML'입니다. 자바스크립트와 XML을 합쳐쓰는거죠. 이번 페이지에서는 JSX로 리액트의 elements들을 만들고, 그것들을 DOM으..