react

개요 리액트를 다루기에 앞서 리액트 공식문서를 읽어보고 정리하며 공식문서를 읽는 습관, 리액트의 기본적인 개념과 문법을 익히는 시간을 가지고자 한다. 💁‍♂️ 로 표시한 내용은 글을 읽고 난 후 저의 생각정리이며, 나머지는 공식문서의 내용과 일치합니다. State and Lifecycle 💁‍♂️ React 공식문서 주요개념 5번을 읽는데 state라는 개념이 나왔다. 공식문서 내용을 일일이 생각하고 고민하며 옮겼음에도 불구하고 state가 무엇인지 감이 잡히지를 않았다. 공식문서에는 시계 예시가 나오는데 왜 state를 쓰는지 이해하지 못했다. 왜냐하면 바닐라 자바스크립트에서는 new Date()를 생성하고 시, 분, 초를 뽑아내서 해당 위치에 넣어주면 전자시계가 완성됐기 때문이다. 단순히 변수를 선언..

개요 리액트를 다루기에 앞서 리액트 공식문서를 읽어보고 정리하며 공식문서를 읽는 습관, 리액트의 기본적인 개념과 문법을 익히는 시간을 가지고자 한다. 💁‍♂️ 로 표시한 내용은 글을 읽고난 후 저의 생각정리이며, 나머지는 공식문서의 내용과 일치합니다. JSX 소개 JSX란? const element = Hello, world!; 위 태그 문법은 string, HTML 둘 다 아니다. JSX라 하며 자바스크립트를 확장한 문법이다. JSX는 React element를 생성한다. React는 별도의 파일에 마크업과 로직을 넣어 기술을 분리하는 대신, 둘 다 포함하는 "Component"라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리한다. 즉 기존에는 .html 파일과, .js 파일을 분리하여 연결해서 사용..

개요 리액트를 처음 다루게 되었는데 그전에 리액트가 무엇인지 이해하고 넘어가는 시간을 갖도록 한다. Why React? 새로운 기술을 학습할 때는 이 기술이 어떤 철학을 가졌는지, 어떤 문제를 해결하기 위해서 만들어졌는지 이해하는 것이 중요하다. 웹 역사는 1세대부터 3세대까지 발전하는데 이러한 기술의 발전과 새로운 기술을 만들어 내는 것은 많은 자원이 투입되는 행위이다. 그럼에도 기술이 계속 발전되는 이유는 그 시대 요구조건과 해결해야 하는 것들이 복잡해지기 때문이다. 웹에서 복잡해진다는 의미는 사람들과 상호작용하며 사용자들이 원하는 기능은 많아지고 개발자들이 처리할 UI가 많아진다는 것이다. 이러한 상황에서 프론트엔드 개발자들은 기술의 한계를 느끼고 새로운 기술인 Front-end Framework을..