⚡초기렌더링이란? 어떤 UI 관련 프레임워크, 라이브러리를 사용하든 맨 처음 화면이 어떻게 보일지를 정해줄 필요성이 있습니다. 이를 초기렌더링 이라고 합니다. 리액트에서는 이 초기렌더링을 다루는 render 함수가 있습니다. render() {...} render() 함수는 컴포넌트의 생김새를 정의하는 역할을 수행합니다. html 형식의 문자열을 반환하는 것이 아니라 객체를 반환합니다. 이때 객체에는 뷰가 어떻게 생겼는지, 어떻게 작동하는지에 대한 정보를 담고있습니다. ** 컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수 있습니다. 이때 render함수를 실행하면 내부에 있는 컴포넌트들도 재귀적으로 렌더링합니다. 이렇게 최상위 컴포넌트의 렌더링 작업이 끝나면 지니고있는 정보들을 사용하여 HTML 을 만..
JSX란 무엇일까요. 당연히 저는 모릅니다. 하지만 인터넷은 답을 알고있네요 const element = Hello, world!; JSX란 자바스크립트를 확장한 문법이며 리액트와 함께 사용할 것이 권장되는 문법입니다. 이 JSX의 문법부터 아주 간단하게 정리해보겠습니다. function App() { let post = 'posting'; return ( hello world { post } ); } 간단한 예제입니다. 뭔가 익숙하게 생겼는데 이것저것 합쳐져서 낯선 느낌이 드네요 1. class를 넣어줄땐 className html에서는 class를 부여하고자할땐 class = "클래스명"으로 클래스명을 지정해주었지만 리액트에서는 className을 통해서 class를 부여해줍니다. 2. {} 중괄호를..
항상 느끼는거지만 처음 해보는 것들은 설치부터가 문제입니다. 또 다른 컴퓨터에 설치할 상황을 고려해서 미리 지금의 시행착오를 적어두면서 영어로밖에 나오지않는 해결책 사이에서 저말고 다른분들은 한글로 해결할 방법을 찾기를.. 결론부터 말하자면 맨처음 react를 설치하고 싱글벙글 실행시켜보려는데 실행이 제대로 되지 않는 경우의 대부분은 별거아닌 이유일것 같습니다. 우선 리액트를 사용하기위해서 윈도우 이용자의 경우 shift + 우클릭으로 Powershall을 띄우고 npx create-react-app 폴더명 위 명령어를 통해서 프로젝트를 생성합니다. 싱글벙글 npm start를 해보면 npm ERR! code ENOENT npm ERR! syscall open npm ERR! path C:\Users\q..
