WEB/react7 Redux 데이터 Flow Redux란? 상태 관리 라이브러리 Props란? - Props(properties의 줄임말) - props는 immutable(변경불가성) - Props 소통하는 방식이 위에서 아래로( 부모components에서 자식으로components로) - 부모가 자식에게 1을 줬으면 1은 바뀔 수 없다. 바꾸고 싶으면 부모가 다시 다른 숫자를 내려줘야함 State란? - 부모 components에서 자식 components로 data를 보내는게 아닌 component 안에서 데이터를 전달하려면 state을 사용 - state는 mutable(변할수있는) - state이 변하면 re-rendering 된다. Action = 무엇이 일어났는지를 설명하는 객체 Reducer = Action으로 인해서 state 상태.. 2023. 4. 5. NPM( Node package manager) vs NPX NPM이란? npm은 node.js의 자동화 된 의존성과 패키지 관리를 위한 패키지 매니저이다. NPM의 역할 1. library를 담고 있는 역할 2. application을 킬때 start, 또는 배포 할 때 build NPX의 역할 원래 create-react-app을 할때 npm install -g create-react-app을 사용하여 global 디렉토리에 다운을 받았다. -> 이제는 npx를 이용하여 create-react-app을 이용 할 수 있다. -> npx가 npm registry에서 create-react-app을 찾아서 다운로드 없이 실행 시켜준다 NPX의 장점 1. Disk Space를 낭비하지 않을 수 있다. 2. 항상 최신 버전을 사용 할 수 있다. 2023. 4. 5. React 웹사이트를 만들기 위해선, 사실 프론트엔드 라이브러리의 도움 없이도 만들어 낼 수 있다. 그리고 단순히 정적 페이지를 만드는거라면 자바스크립트 없이도, 그냥 HTML과 CSS를 사용해서 만들 수 있다. 그런데 요즘의 웹은 단순히 웹 페이지가 아니라, 웹 애플리케이션 이다. 브라우저 상으로도 정말 자연스러운 흐름으로 매우 많은 것들을 할 수 있다. 하지만 어떠한 유저 인터페이스를 동적으로 나타내기 위해서는 정말 수많은 상태를 관리 해주어야 한다. increase 0 + 우리가, 버튼을 눌러서 0 값을 바꿔주려면 각 DOM 엘리먼트에 대한 레퍼런스를 찾고, 해당 DOM에 접근하여 원하는 작업을 해야한다. var number = 0; var elementNumber = document.getElementByI.. 2023. 3. 20. JSX JSX란? const element = Hello, world!; - 위에 태그 문법은 문자열도, HTML도 아니다. - JSX라 하며 JavaScript를 확장한 문법이다. - JavaScript의 모든 기능이 포함되어 있다. - JSX는 React "엘리먼트(element)"를 생성한다. React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식)과 연결된다는 사실을 받아들입니다. JSX에 표현식 포함하기 function formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'Harper',.. 2023. 3. 7. State and LifeCycle(생명주기) element 렌더링을 이용한 째깍거리는 시계 예시 const root = ReactDOM.createRoot(document.getElementById('root')); function tick(){ const element = ( Hello, world It is {new Date().toLocaleTimeString()}. ); root.render(element); } setInterval(tick, 1000); Clock 컴포넌트를 만들어서 완전히 재사용 하고 캡슐화 하는 방법 const root = ReactDOM.createRoot(document.getElementById('root')); function Clock(props){ return( Hello, world! It is {prop.. 2023. 3. 7. 컴포넌트(Components) 함수 컴포넌트 - 컴포넌트를 정의하는 가장 간다한 방법은 JavaScript 함수를 작성하는 것이다. function Welcome(props){ return Hello, {props.name}; } 이 함수는 데이터를 가진 하나의 "props" (props는 속성을 나타내는 데이터) 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트 이다. JavaScript 함수이기 때문에 말 그대로 "함수 컴포넌트"라고 호칭한다. 클래스 컴포넌트(ES6 class 사용) class Welcome extends React.Component{ render() { return Hello, {this.props.name}; } } 컴포넌트 렌더링 function Welcome(props) { .. 2023. 3. 4. element(엘리먼트) element(엘리먼트) - 엘리먼트는 React 앱의 가장 작은 단위 이다. - 엘리먼트는 화면에 표시할 내용을 기술 한다. const element = Hello, world; - 브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체(plain object)이고 쉽게 생성 가능하다. - React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트 한다. DOM에 엘리먼트 렌더링 하기 - HTML 파일 어딘가에 가 있다고 가정 - 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 "루트(root)" DOM 노드라고 한다. - React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있다. - React를 기존 앱에 통합하려는 경우 원하는 만.. 2023. 3. 4. 이전 1 다음
