리액트4 [winterlood 강의] React App 만들기 note React.js : Node 기반의 JS UI 라이브러리 Webpack : 여러 개의 자바스크립트 파일을 하나의 파일로 합쳐주는 모듈 번들 라이브러리 Babel : JSX 등의 쉽고 직관적인 자바스크립트 문법을 사용할 수 있도록 해주는 라이브러리 Create React App : 리액트에 필요한 패키지들과 복잡한 환경설정 등을 미리 설치해놓고 바로 사용할 수 있도록 감싸놓은 패키지(Boiler Plate; 틀, 표준의 의미) '보일러 플레이트' 용어의 기원 >> https://whynameitthat.blogspot.com/2013/10/boiler-plate.html Boiler Plate The origins of interesting names of places, people, products, b.. 2023. 1. 20. [KDT 강의] 리액트 뜯어보며 이해하기 2 props : 부모 컴포넌트로부터 상속받는 자식 컴포넌트에 데이터를 전달하는 방법 자식 컴포넌트에서 읽기 전용(immutable)으로 사용되며, 변경하고자 할 때는 부모 컴포넌트에서 state를 조작해야 한다. VS state : 해당 컴포넌트 내에서 데이터를 전달하는 방법 변경 가능(mutable)하고 변경이 되면 화면이 re-render 된다. 자식 컴포넌트의 state들을 한 곳에서 모아 유지해야 하거나, 두 개의 자식 컴포넌트들이 서로 통신을 해야해서 가능하게 하려면, 부모 컴포넌트에 공유 state를 정의해야 한다 ! => 부모 컴포넌트는 props를 사용해 자식 컴포넌트에 state를 다시 전달할 수 있고, 이를 통해 자식 컴포넌트들이 서로 혹은 부모 컴포넌트와 동기화하도록 만든다. React.. 2023. 1. 13. [KDT 강의] 리액트 뜯어보며 이해하기 클래스형 컴포넌트를 사용할 때는, 화면에 렌더할 때 React.Component에 있는 render() 메소드를 사용해줘야 한다. 사용하면 좋을 extension tool 컴포넌트를 보다 손쉽게 생성할 수 있게 해준다 ! ex) rfc => 기본적인 함수형 컴포넌트 생성해 줌. (React Functional Component) rcc => 기본적인 클래스형 컴포넌트 생성해 줌. (React Class Component) rccp => React Class Component PropType rce => React Class Export TicTacToe App 만들기 리액트에서는 컴포넌트 간에 데이터가 오고갈 때, Props를 사용한다 ! 특별히 상속하는 부모 컴포넌트에서 자식 컴포넌트에 데이터를 전달하.. 2023. 1. 6. [KDT 리액트] 리액트란? 1 리액트는 인터렉션이 많은 웹 앱을 개발하기 위해 주로 사용된다. 프레임워크는 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있고, 라이브러리는 어떤 특정 기능을 모듈화 해놓은 것으로 프레임워크는 여러 라이브러리들 포함하고 있는 더 큰 범위이다. 리액트는 프레임워크가 아닌 라이브러리라고 보는 이유는, 전적으로 UI를 렌더링하는 데 관여하기 때문이다. cf. 앵귤러(Angular)와 뷰(Vue)는 프레임워크 리액트는 함께 사용될만한 라이브러리들이 잘 마련되어있는, 즉 리액트의 생태계가 잘 갖춰져있다. 예를 들면, 라우팅(페이지 이동)을 위한 라이브러리 react-router-dom이라든지 상태 관리를 위한 라이브러리들 redux, recoil, mobx라든지 빌드를 위한 webpack, npm이라든지.. 2022. 12. 30. 이전 1 다음
