300x250 React6 쉽게 필요한 부분만 React 라이프사이클(life cycle) 프론트엔드 개발 신입 면접에서는 필수 질문인 라이프사이클에 대해 간단하게 정리해보겠습니다. 정확한 이해는 다른 블로그를 참고해 주세요. 면접 답변을 위한 정리입니다. Class 컴포넌트의 라이프 사이클 class 컴포넌트는 생성(mounting), 업데이트(updating), 제거(unmounting) 세가지 단계로 구분됩니다. 각 단계는 특정 시점에 호출되는 라이프사이클 메소드를 통해 개발자가 컴포넌트의 상태와 생명주기를 제어할 수 있습니다. 출처: https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ 생성(Mounting) constructor(props): 컴포넌트의 생성자 함수로, 컴포넌트의 초기 상태를 설정하거나 메소드 바인딩을 수행합니.. 2024. 3. 6. [Error] 'Switch' is not exported from 'react-router-dom' 해결 'Switch' is not exported from 'react-router-dom' 해결 방법 ✅ 개념 - react-router-dom v6로 업데이트 되면서 변경된 부분 중에 하나가 Switch가 Routes 로 바뀌었다. ✅ 왜 배워야 할까? - npm install "react-router-dom" 을 설치하게 되면, "react-router-dom": "^6.0.2" 이 설치가 된다 - 그럴 경우, 제목과 같은 에러를 만날 수 있다. - 버전 5를 까는 방법도 있지만 앞으로 사용해야하니 제대로 알고 넘어가야한다. ✅ 기존에 있던 것과 차이점 바뀐 것이 여러가지 있지만, 바로 사용하는 4가지만 알아보겠습니다. 1. 70%나 작아진 번들 사이즈 번들 사이즈를 줄여야 하는 이유 - 성능 및 로드 .. 2021. 11. 14. [react, Css-in-JS]modal창 구현, styled 사용법, cursor, × 1. modal 창 구현하기 결과화면 (storybook 이용) 알게 된 것 1. styled-components 활용하기 -리액트의 한 컴포넌트 안에서 스타일을 적용시킬 수 있다. 깔끔하게 - styled-components을 사용하기 위해서는 맨 위에 import styled from 'styled-components'; 를 써준다. -기본적인 형태는 다음과 같다. 첫줄과 마지막 줄이 가장 기본의 형태이고, 적용할 속성은 다음과 같이 들어가면 된다. - 형태인 modalBtn의 변수에 스타일을 할당해준 것. export const ModalBtn = styled.button` background-color: #4000c7; text-decoration: none; border: none; paddin.. 2021. 6. 8. React 노마드코더 기초강의 무비앱 만들기 완료 리액트가 너무 부족한 거 같아 찾아보다가 무료 강의가 있어해 봤는데 좋은 강의 같습니다! ReactJS로 영화 웹 서비스 만들기 https://github.com/dydwns2441/movie-app-2021 dydwns2441/movie-app-2021 react JS Fundamentals COurse (2021 update!) pratice nomadcoder - dydwns2441/movie-app-2021 github.com 2021. 5. 23. react 컴포넌트와 props로 데이터 보내기 이번엔 props에 대해 포스팅하려고 합니다. 리액트에 장점 중 하나는 컴포넌트형으로 작은 단위로 나눌 수 있다는 것입니다. 부모 컴포넌트에 있는 데이터들을 props를 통해 자식컴퍼넌트에서 사용할 수 있습니다. 위의 사진에서 보면 movie.js 컴포넌트안에 3번째 줄엔 props라고 써져있는것을 볼 수 있습니다. 그렇다면 부모 컴퍼넌트의 어떤 자료를 사용한 것일까요/ 6번 줄에 {props.movie.title} 과 7번 줄에 {props.movie.year} 이 부모 컴포넌트에서 가져온 자료, props라고 할 수 있습니다. 사용법은 위에와 같습니다. 왜 {props.movie.year}처럼 사용했을까요? 밑에 App.js를 보면 22번째 줄을 보면 movie라는 속성에 movie라는 속성을 만들어.. 2021. 5. 12. react 리액트 조건렌더링 이번 포스팅은 react에서 조건렌더링 하는 방법에 대해 알아보겠습니다. useState를 사용해서 저 toggle이란 버튼을 누르면 false => true로 true=> false 바뀌게 하는겁니다. 1) 8-10 줄을 보시면 renderCondition이라는 변수를 만들고 그안에 컨디션이 true면 true를 보여주고 아니면 false를 보여준다는 삼항연산자를 사용하여 할당하였습니다. 2)이 변수를 15번 줄에 {} 중괄호를 사용해서 넣어줬구요. 3)그밑에 버튼을 하나 만들었습니다. onClick으로 toggle이라는 함수를 넣어줬습니다. 4)toggle이라는 함수는 condition이라는 변수가 반대가 될수있는 setCondition함수를 가지고 있습니다. 5) 5번줄을 보시면 useState의 .. 2021. 5. 8. 이전 1 다음 반응형
