React4 JSX 1 JSX란? React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다. React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리한다. React는 JSX 사용이 필수는 아니지만, JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해준다. JSX에 표현식 포함하기 const name = '개철'; const element = Hello, {name}; 위의 코드와 같이 변수를 선.. 2023. 7. 13. React 1 (기본 사용법, State 소개) 실제로 코드를 구현하면서 설명해보겠습니다. 일단 페이지는 Blog를 만들어보는걸로 해보겠습니다. 우선 글을 읽는 독자분들이 html이나 css, js의 기본적인 부분은 안다고 가정하고 글을 쓸 예정이니 양해해주시길... 기본적으로 react의 코드 구현은 App.js에서 하면된다. import logo from './logo.svg'; import './App.css'; function App() { return ( MyBlog menu1 menu2 menu3 글 제목 2023-07-02 글 제목 2023-07-02 글 제목 2023-07-02 ); } export default App; 위 코드의 App()이라는 함수의 return 값을 보면 괄호안에 html과 거의 흡사한 코드가 구현되어있는 것을 볼.. 2023. 7. 2. React 환경 설정 및 프로젝트 생성하기(Windows) 1. 우선 아래 링크로 접속하여 Node.js를 설치한다. https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 링크에 접속하면 아래와 같은 화면이 뜨는 데 웬만하면 왼쪽의 다운로드 링크를 사용하자. 노드 뿐만 아니라 어떤 개발도구도 최신버전을 사용하기보다는 좀 안정화가 되어있는 버전을 쓰는게 좋다. 왜냐하면 최신버전에는 어떤 버그가 도사리고 있을 지 모르기 때문이다. 최신버전에서 우리가 해결할 수 없는 버그를 만나게 되면 뭐 때문에 잘못되었는지도 모른 채 시간을 낭비하게 된다. 하지만 좀 오래된 버전은 이미 많은 개발자들이 사용해왔고 지금도 사용하고 있는.. 2023. 7. 2. React 시작하기 React란? 간단히 말해 SPA(Single Page Application) 개발을 위한 라이브러리이다. SPA 개발을 위한 유명한 툴로는 React, Angular, Vue.js 등이 있는데 이 중 Angular와 Vue.js는 프레임워크이고 React만 라이브러리라고 한다. 이로 인해 얻을 수 있는 장점은 타 프레임워크와 함께 쓰기 편하다는 점 정도가 있을 것이다. Dirty checking과 Virtual DOM을 활용하여 업데이트 해야하는 DOM 요소를 찾아서 해당 부분만 업데이트하기 때문에, 리렌더링이 잦은 동적인 모던 웹에서 엄청나게 빠른 퍼포먼스를 내는게 가능하다. 기본적으로 모듈형 개발이기 때문에 생산성 또한 상당히 높은 라이브러리이다. React 사용 import './App.css';.. 2023. 7. 1. 이전 1 다음
