반응형 [React.js] 엘리먼트(Element)와 컴포넌트(Component) 엘리먼트(Element) 전 React 엘리먼트를 영화의 프레임으로 생각합니다. React 엘리먼트는 매 순간 어떻게 보여야 되는지 파악하고 변하지 않습니다. - overreacted React 앱의 화면을 표시하는 가장 작은 구성 요소로써 일반 객체(plain object)이다. 영속성을 가지지 않는다. 즉 매번 새로 만들어지고 버려진다. 불변함을 가지기 때문에 생성한 이후 해당 엘리먼트의 자식이나 props을 변경할 수 없다. 따라서 다른 렌더링을 보여주고 싶다면 새로운 엘리먼트 트리를 생성해야 한다. React 엘리먼트는 화면에 무엇을 그리고 싶은지에 대한 정보가 들어있는 객체와 같다. React.createElement( type, [props], [...children] ) type 인자로는 태.. 2021. 7. 17. [React.js] JSX와 XSS(Cross Site Scripting) 공격 JSX 마크업과 UI 로직을 둘 다 포함하여 개발을 할 수 있다. 익숙한 문법으로 협업에 용이하다. 컴포넌트별로 분류하여 유지보수를 쉽게 할 수 있다. 속성 정의는 따옴표('')를 이용해 문자열 리터럴이나 중괄호({})로 JS 표현식(문법, 변수 등)을 삽입할 수 있다. HTML보다는 JS에 가깝기 때문에, 클래스 명명은 camelCase 명명 규칙을 사용한다. React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프한다. 따라서 앱에 명시적으로 작성되지 않은 내용은 주입되지 않는다. 모든 내용을 렌더링 되기 전에 문자열로 변환한다. 이런 특성들로 인해 XSS(Cross Site Scripting) 공격을 방지할 수 있다. 이스케이프(Escape) 특정 문자를 원래의 기능에서 벗어나게 변.. 2021. 7. 14. [React.js] 프로젝트를 하며 배운 것들 습관 만들기 😤 결과물을 확인해보세요. 🧑🏻💻 그래서 제가 배운 것은요...🏃🏻♂️ 1. JSX 왜 써? JavaScript와 UI 개발(HTML)을 한 곳(컴포넌트)에서 프로그래밍 할 수 있다. HTML과 비슷한 문법, 협업에 용이 컴포넌트별로 분류하여 유지보수가 쉬움 2. State 컴포넌트 안에서 정의한 state 오브젝트(데이터를 관리하는 저장소라고 생각한다) state는 얕은 비교를 한다. 최상위 오브젝트의 참조값이 변하지 않으면 render 함수를 호출하지 않는다. setState 함수를 이용해서 새로운 상태의 오브젝트(업데이트 하고자 하는 상태 데이터)를 인자로 전달해 주어야 한다. setState 함수는 비동기 API이다. state 안의 데이터를 직접 수정하지 마! setState 함.. 2021. 4. 4. 리액트를 왜 쓰는 걸까? 자바스크립트도 아직 친해지지 못했는데 리액트란 녀석이 눈에 띄기 시작했습니다. 프론트 엔드 3대장 중 가장 인기있고 기업에서 요구하는 스택이기도 합니다. 여러 비교 영상이나 글도 굉장히 많아서 3대장을 쉽게 비교해 볼 수 있었고 결국 리액트로 결정했습니다. 제 개인적인 생각은 무겁고 배우는데 오래걸리는 앵귤러, 배우기는 쉽지만 개인 프로젝트에 적합한 뷰의 절충선이 리액트가 아닌가 싶습니다. 또한 리액트 웹사이트 설명이 굉장히 잘 되어있고 친절합니다. 하지만 결국 이것도 개인적인 생각이고 도구일 뿐입니다. 저희는 사용 방법을 익히고 본인에게 맞는 도구를 사용하면 됩니다. 페이스북은 왜 리액트를 만들었을까? 페이스북은 아마 단일 웹 사이트 중에서 가장 규모가 큰 웹 사이트가 아닐까 싶습니다. 게다가 사용자와.. 2020. 11. 5. 이전 1 다음 반응형
