React

[React] useMemo

코드스테이즈 41기 교육 내용을 정리하고 있습니다. 틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다 useMemo 특정값을 재사용 하고자 할 때 사용하는 Hook입니다. 메모지네이션 개념과 긴밀한 관계가 있는데, 메모지네이션은 기존에 수행한 연산 결과값을 메모리에 자장해두고, 동일한 입력이 들어오면 재활용하는 프로그래밍 기법입니다. 메모지네이션을 적절하게 사용하면 중복연산을 피할수 있고 앱의 성능을 최적화 할수 있습니다. useMemo 예제 useMemo사용하기 전 텍스트를 입력하면 문자를 자동으로 대문자로 변경해주는 코드입니다. 상단에 있는 버튼은 아무 영향을 주지 않는 잉여버튼입니다. console창을 확인하면 문자 하나 입력 할때 마다 '문자가 입력되었습니다.'하는 log가 뜹니다. 하지만 버튼..

[React] Redux

코드스테이즈 41기 교육 내용을 정리하고 있습니다. 틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다. Redux를 사용하는 이유 다음과 같은 컴포넌트가 있습니다. Root은 최상의 컴포넌트이고, 각각의 컴포넌트의 위에 배치된 컴포넌트가 부모 컴포넌트 입니다 다음 그림 처럼 Right3컴포넌트에서 버튼을 눌러서 Left3의 숫자를 증가시키려고 하면 어떻게 코드를 작성해야 할까? 아마 가장 상위 컴포넌트인 Root컴포넌트에 const [number, setNumber] = useState(0);과 같이 useState를 선언한다. Root 컴포넌트는 Left1컴포넌트에 useState의 값인 number를 props로 보내고, Left1컴포넌트는 Left2컴포넌트에 useState의 값인 number를 ..

[React]Custom Component - Styled Components

코드스테이즈 41기 교육 내용을 정리하고 있습니다. 틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다. Component Driven Development CDD 부품 단위 (작은 컴포넌트)로 UI컴포넌트를 만들어 나가는 개발 방법 상향식 개발 CSS-in-js javascript에서 css를 작성하는 방식 -> css도 컴포넌트 영역으로 불러 들일 수 있게 됨 이중 대표적인 Styled-Component에 대해 집중적으로 공부하려 합니다. Styled-Components react를 사용하면 html요소와 js요소는 한 js파일에서 만들고 사용하여 편리하지만 css는 style sheet를 만들고, import하고 각각의 태그를 id나 class이름으로 연결을 해야했습니다. 관리가 불편하다! 이런 불..

[React] React데이터 흐름

코드스테이즈 41기 교육 내용을 정리하고 있습니다. 틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다. 🐉React 데이터 흐름 react의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 점이다. 컴포넌트는 컴포넌트 바깥에서 props를 이요해 데이터를 전달인자처럼 전달 받을수 있다 데이터를 전달하는 주체는 부모컴포넌트, 데이터를 받는 쪽은 자식 컴포넌트가 된다. 이러한 관계가 계속되면 컴포넌트는 트리구조를 이루고, 이런 구조의 데이터흐름은 하향식이다. 🐉State 끌어올리기 단방향 데이터 흐름이라는 원칙에 따라, 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터의 형태 혹은 타입이 무엇인지만 알 수 있다. 상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌..

[React] Props & React State

코드스테이즈 41기 교육 내용을 정리하고 있습니다. 틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다. 🦍Props 컴포넌트의 속성을 의미한다 성별이나 이름처럼 변하지 않는 부모(상위)컴포넌트로 부터 전달받은 값을 말한다 갹체형태를 갖는다. props는 함부로 변경될 수 없는 읽기 전용 객체이다. props를 사용하는 방법은 아래 3단계를 따른다. 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의 한다. props를 이용하여 정의된 값과 속정을 전달한다. 전달받은 props를 렌더링 한다. import './App.css'; function App() { return ( Hello ) } function World(props){ console.log(props) return( {props.text} )..

[React] React SPA/ React Router

코드스테이즈 41기 교육 내용을 정리하고 있습니다. 틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다. 🦍React SPA SPA는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트를 말합니다. 예를 들어 유튜브에 들어가서 새로고침을 하면 다음 화면이 잠깐 보인다 회색으로 보이는 영상 부분이 아직 로드가 안되었기 때문이다. 이러한 SPA는 어떤 장점이 있을까? 🐒[장점]사용자와의 상호작용에 빠르다. 전체 페이지가 아니라 필요한부분의 데이터만 반아서 화면을 업데이트 하면 되기 때문에 사용자와의 상호작용에 빠르다. 페이스북 사용자가 게시글에 좋아요를 누..

[React] JSX/ map을 이용한 반복/ Component

코드스테이즈 41기 교육 내용을 정리하고 있습니다. 틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다. 🦍JSX JSX는 Javascript XML로 줄인말로 문자열도 HTML도 아니다 React에서 UI를 구성할 때 사용하는 문법으로 Javascript를 확장한 문법이다. React는 Javascript에서 사용했던 Dom과 다르게 JSX와 CSS문법만 가지고 웹 어플리 케이션을 만든다 기존 Dom에서 Html, Javascript, css를 사용했던 것과 차이가 난다. 화면의 구조를 짜는 html과 구성된 화면을 동적으로 하는 javascrit를 같이 다루면서 수정이 쉽고, 이해가 수월하다 나는 그렇다 물론 React에서 JSX없이 코드를 짤수 있지만, JSX문법을 사용하면 더 좋은 가독성과 코드의..