티스토리

할머니의 콤퓨타 도전기
검색하기

블로그 홈

할머니의 콤퓨타 도전기

jioneprogstdy.tistory.com/m

아녕

구독자
2
방명록 방문하기

주요 글 목록

  • (React) Material-UI Material-UI React 개발에서 쉽게 사용할 수 있는 UI Framework https://material-ui.com/ Material-UI: A popular React UI framework React components for faster and easier web development. Build your own design system, or start with Material Design. material-ui.com 패키지 다운로드 npm install @material-ui/core // with npm yarn add @material-ui/core // with yarn SVG Icons 설치 npm install @material-ui/icons // with npm yar.. 공감수 0 댓글수 0 2021. 5. 5.
  • Component Life Cycle Mounting 아래 메서드들은 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될 때에 순서대로 호출 constructor() static getDerivedStateFromProps() render() componentDidMount() Updating props 또는 state가 변경되면 갱신이 발생. 아래 메서드들은 컴포넌트가 다시 렌더링될 때 순서대로 호출 static getDerivedStateFromProps() shouldComponentUpdate() render() getSnapshotBeforeUpdate() componentDidUpdate() Unmounting 아래 메서드는 컴포넌트가 DOM 상에서 제거될 때에 호출 componentWillUnmount() 공감수 0 댓글수 0 2021. 4. 8.
  • All you need to know about State state의 변수의 직접 변경할 수 없음 위와 같이 직접적으로 변경하면 render 함수가 자동적으로 실행되지 않으므로, 뷰가 동적인 변경이 되지 않음 Do not mutate state directly 에러 발생 state값 변경하는 방법 버튼을 클릭하여 add함수를 실행하면, setState() 실행, state의 count 값이 변경되는 동시에 render 함수를 자동으로 실행 this.state.xxx를 직접 사용하는 것은 바람직하지 않음. 따라서 아래와 같이 수정 공감수 0 댓글수 0 2021. 4. 8.
  • Class Components and State class component function component와 달리 state 표현 가능 function component는 함수로써 무엇인가를 바로 return해서 screen에 표현하지만, class는 React Component를 extends 하고 render method로 return을 적어서 표현 state 컴포넌트 내부에서 자체적으로 읽고, 업데이트할 수 있는 값을 사용하기 위해 state가 존재 모든 리액트 컴포넌트 내에 존재할 수 있는 Object dynamic data 변화를 주고 싶은 data를 state로 주로 정함 onClick: React에 있는 prop 기능 공감수 0 댓글수 0 2021. 4. 8.
  • npm? npx? 🤔 npm (node package manager) Node.js의 의존성과 패키지 관리를 위한 패키지 매니저 자바스크립트 모듈을 받아오기 위함 Node.js에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할 패키지 설치 및 관리를 위한 CLI (command line interface)를 제공 npm install 지역 설치 (기본) 프로젝트 루트 디렉터리 내에 node_modules 디렉터리가 자동 생성. 그 안에 패키지 설치 해당 프로젝트 내에서만 패키지 사용 가능 npm install -g 전역 설치 프로젝트마다 같은 모듈 공유해서 사용 가능 모듈 업데이트 여부 확인 불가능 업데이트를 진행 했을 시 변경이 생겨 다른 프로젝트에도 영향을 끼칠 수 있음 create-react-app 같은 보일.. 공감수 0 댓글수 0 2021. 4. 7.
  • Protection with PropTypes prop-types 설치 npm i prop-types props 안에 있는 prop들의 type 검증 우선 PropTypes를 import하고 favFood에 rating 추가해줌 App component 내부의 Food component에 rating props를 추가하고 Food component에서 argument로 rating 추가 그리고 Food.propTypes로 Food component 내부의 props의 Type을 지정한다. props(name, picture, rating)의 type을 string으로 확인하려 하고, isRequired는 요구되는 값이 무조건 있어야한다는 뜻으로 값이 있는지 확인함 하지만 rating의 type은 number이기 때문에 위와 같은 오류가 뜨게된다. r.. 공감수 0 댓글수 0 2021. 4. 1.
  • map Recap 이전 게시글에서 작성한 코드를 실행하면 Warning: Each child in a list should have a unique "key" prop.이 뜬다. 이 전에 favFood를 Array로 만들어서 각각의 item을 구별할 수 있는 고유한 key가 없어서 warning이 뜨는 것이다. React의 모든 element들은 다르게 보여야 한다. 따라서 favFood 각각의 item에 고유한 id를 부여하고 Food component에 key props 생성 후 favFood안의 id를 불러와 대입 에러가 사라짐. key props는 Food component 자체로 사용되는게 아닌, React 내부에서만 사용. 즉 React가 알 수 있는 고유 id가 부여된 것이다. img elements must.. 공감수 0 댓글수 0 2021. 4. 1.
  • Dynamic Component Generation map map은 Array 내부의 각각의 item에 대해 function을 적용하고 새로운 Array를 형성 friends 배열 선언 console.log(item)을 통해 friends element를 하나씩 출력하고 0을 리턴함으로써 모든 원소의 값이 0인 새로운 Array를 형성함. 이처럼 map 활용 가능 공감수 0 댓글수 0 2021. 3. 31.
  • Reusable Components with JSX + Props props (property) children component의 props는 parent component에서 넣는 정보 Food component 생성 후 fav라는 props로 sushi라는 value를 넘겨줌. 위와 같이 props 여러개도 가능. string type 뿐만 아니라 boolean, array 등 다 가능 전달한 부모 component(App)에서 전달한 props는 Food component의 argument로 사용함. props를 console log 찍으면 다음과 같이 Object로 출력됨 자식 component(Food)에서 props의 fav의 접근하고자 하면, 위와 같이 {props.fav} 로 적어주면 됨. props를 계속 치는게 귀찮다면 {}를 통해 fav에 바로 접.. 공감수 0 댓글수 0 2021. 3. 31.
  • React Component, JSX component html을 반환하는 function 위와 같이 App component를 만들어줄 수 있음. 과 같은 방식으로 component를 사용할 수 있음. 이는 function으로 정한 App component를 불러오는 것을 의미. JSX javascript 안의 html javascript와 html사이에서 component를 이용해 html을 rendering하는 개념 Create a React Component Potato component 생성. 주석과 같이 새로운 component 생성할 때 마다, import React from "react";를 써줘야함. export default Potato;를 통해 JSX로써 html에 rendering 할 수 있게됨. index.js에서 P.. 공감수 0 댓글수 0 2021. 3. 31.
  • How does React work? function App() 사이에 Hello을 추가해줌. index.html의 공감수 0 댓글수 0 2021. 3. 31.
  • REACT SETUP Requirments node -v npm -v npx -v git --version Create React App npx create-react-app folder_name Start React App npm start 공감수 0 댓글수 0 2021. 3. 31.
  • DSC 리액트 스터디 시작 🐼 공감수 0 댓글수 0 2021. 3. 31.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.