목록React 스터디 (2)
끄적끄적
1. 리액트 탄생 배경 JSON 객체 값을 반영하는 뷰가 있다고 가정하자. { "title": "0603 diary", "contents": "today will be happy", "author": "sungil", "likes": 1 } 0603 diary today will be happy sungil 1 likes값이 2로 변한다면 애플리케이션에서 post-1의 likes 요소를 찾아 값을 변경해서 보여주면된다. 위의 간단한 상황에 대해서는 단순한 규칙으로 likes에 들어가는 값을 바꿔줄 수 있다. 그러나, 이러한 작업이 애플리케이션 규모가 복잡해지면, 제대로 관리되지 못할시 성능이 떨어진다. 페이스북개발팀에서는 이러한 변화가 생길 때, 어떤 변화를 줄지 고민하는것이 아닌 기존 뷰를 날려버리고 ..
리액트에서 사용되는 JSX가 무엇인지 공부하고, 기본 문법을 정리한다. 1) JSX란? 자바스크립트 확장 문법으로, 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다. /* JSX 코드 예시 */ function App() { return { Hello react }; } /*변환된 일반 Javascript 코드*/ function App() { return React.createElement("div", null, "Hello ", React.createElement("b", null, "react")); } 바벨은 자바스크립트 문법은아니고, 위처럼 코드변환 역할을 수행한다. JSX코드를 이용한 쪽이 코드작성이 쉽고, 가독성도 좋아보인다. ..