SSO의 개발공부 블로그

[노마드 코더] ReactJS로 영화 웹 서비스 만들기 #3 * 변수를 JSX 에 전달하는 방법 = 변수를 선언하고, 중괄호에 담는다. * 컴포넌트 리렌더링 방식 2가지 첫번째 방식 >> 1. container를 한번 렌더링하기만 하고, 리렌더링이 되지않아 UI는 업데이트 되지 않는 코드 2. countUp 라인이 호출되면 counter가 1 증가하고, 그 뒤에 Container 를 리렌더링 해주면 UI도 업데이트되는 코드 - 위 2번 코드와 동작이 동일한 render 함수를 만든 버전 결론 => 위 방법은 데이터를 바꿀 때마다 다시 렌더링하는 것을 잊으면 안되므로 최고의 방식은 아니다. 버튼을 클릭하여 증가하는 counter 값을 render 함수를 다시 호출하지 않고, 자동으로 리렌더링하려면 어떻게 ..

[노마드 코더] ReactJS로 영화 웹 서비스 만들기 #1 - React JS 는 페이스북에 의해 만들어 졌고, 아직도 사용 중 - 최근엔 인스타그램, 핀터레스트, 넷플릭스 등 큰 사이트들도 React JS 를 사용함 [노마드코더] ReactJS로 영화 웹 서비스 만들기 #2 1. 위 코드 실행 시에는 그냥 흰 백지화면으로 elements 확인 시 body 안은 당연히 비어있고, console에 span을 치면 span은 생성되었지만 페이지에는 올라오지 않은 것을 확인 가능함 2. body 안에 React element 를 가져다 두는 방법 : React JS 가 HTML 생성하게 하려면 react-dom 이 필요함. - React JS 는 어플리케이션이 아주 interactive하게 만들어주는 lib..

이 링크를 참고하여 미리 만들어둔 React JS 폴더 안에 react 파일을 생성하고 해당 파일 실행 완료 1. VScode 실행 상태에서 '파일 > 열기' 경로를 통해 프로젝트 만들 폴더 선택 2. 터미널에 'npx create-react-app 프로젝트명' 명령어 작성 3. 해당 프로젝트 파일의 정상생성 확인 후 'cd 프로젝트명' 을 통해 해당 프로젝트 경로로 이동 4. 'npm run start' or 'npm start' 명령어 통해 localhost 서버 스타트