React입문
1.React 입문 第一番目 : 리액트란?
리액트란 페이스북에서 만든 자바스크립트 라이브러리입니다.더 길게 말하자면, 리액트는 애플리케이션의 뷰 레이어만 담당하는 자바스크립트 라이브러리입니다. 즉, 사용자 인터페이스를 렌더링 하고 UI 가 변경될 때마다 업데이트를 하는 작업만을 담당하는 것이죠. 예를 들자면,
2.React 입문 第二番目 : 리액트의 설치 및 설정
리액트 설치 프로젝트에 리액트 패키지를 설치하기 위해서는, 먼저 노드 패키지 매니저(node package manager = npm)를 설치해야 합니다 만약 컴퓨터에 로컬 리액트 프로젝트를 세팅하고 싶다 할시에는, 터미널에 npx craete-react-app 디렉
3.React 입문 第三番目 : React.createElement에 관하여
리액트에서는 document.createElement를 쓰지 않습니다. 비슷하게 생겼고 유사성도 있지만 같지는 않죠. 뭐가 다른건가 알아보겠습니다. document.createElement의 경우, DOM요소를 반환합니다. 예를 들어 div라던가 span이라던가 h1등
4.React 입문 第四番目 : JSX에 관하여(1)
앞서, React를 쓸 때 React.createElement를 이용해서 UI에 요소를 표시한다는 걸 알았습니다. 하지만, 솔직히 너무 길고 지루한 문법이죠. 이러한 문제점을 해결하기 위해 리액트가 사용하는 특별한 문법을 JSX라고 합니다. 이것이 JSX입니다, 원래
5.React 입문 第五番目 : JSX에 관하여(2)
JSX가 React.createElement로 바뀌는 과정에서 객체를 반환한다는 것은, JSX 요소 또한 객체라는 얘기가 됩니다. 짚고 넘어가자면, 이 객체가 리액트가 가상 DOM에 유지시키는 UI의 조각이라고 보시면 됩니다. 변수에 할당할 수 있다. 함수에서 반환 시
6.React 입문 第六番目 : JSX에 관하여(3)
JSX 표현식. 여기서 표현식이란 뭘까요? 표현식이란, 값으로 확인 될 수 있는 유효한 자바스크립트 코드를 말합니다. 예를 들어 보자면, "JavaScript" , 1+2 , 변수로 지정된 code, new Date()등입니다.
7.React 입문 第七番目 : JSX Children
지금까지는 children(자식) 을 가지고 있지 않은div, span과 같은 JSX요소들로만 작업했지만 이번엔 자식을 가지고 있는 요소로 해보겠습니다. 위의 코드처럼, React.createElement를 쓰게되면, 3번째 인자를 chidlren(자식)이라고 인식하게