본문 바로가기
반응형

개발/React52

번역)Presentational and Container Components Presentational and Container Components Presentational Container 기능 어떻게 보여지는가 어떻게 동작하는가 Redux와 연관성 없음 있음 Read data Props에서 data를 읽는다 Redux의 State에 접근한다. (useSelector) Change data props에서 콜백을 호출 Redux Action 리액트에서 컴포넌트는 상태관리, DOM관리, 이벤트 관리 등 다양한 역할을 하는데, 컴포넌트가 규칙없이 배치되어 있다면 가독성이 떨어지고 관리가 어려워진다. 리액트에서 컴포넌트를 presentational, container 로 나누는 것은 재사용성과 유지보수성을 향상시킬 수 있다. https://medium.com/@dan_abramov/.. 2021. 9. 27.
Styled-Component에 hover 간단하게 넣는 법 Styled-Component에 hover 간단하게 넣는 법 hover는 element에 마우스를 올렸을때 일어날 반응을 의미한다. 한편 styled-component는 css를 js에서 사용할 수 있게 하는 라이브러리이다. 그럼 styled-component에서 hover 간단하게 넣는법을 알아보자. import styled from "styled-components"; const Button = styled.button` &:hover{ background-color : skyblue; color : blue } `; &:hover에서 &는 자신, 그러니까 Button을 의미한다. 이는 css-in-js인 styled-component가 css로 컴파일 될 때 외부선택기로 대체되어 다음과 같이 컴파일.. 2021. 9. 14.
리액트 key 리액트 Key 리액트에서 key 는 어떤 항목을 변경, 추가 삭제할지 식별하는 것을 돕는다. 리액트에서 map() 함수를 이용해서 배열을 반복 실행할 수 있다. 다음의 예시를 보자. const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => {number} ); . . . ReactDOM.render( {listItems}, document.getElementById('root') ); 위 코드를 실행하면 다음과 같은 경고창이 뜬다. 배열의 각 항목에 unique한 key를 넣으라는 뜻이다. const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => // .. 2021. 8. 20.
리액트 조건부렌더링 정리 &&를 이용한 조건부 렌더링 삼항 연산자를 이용한 조건부 렌더링 null 을 이용하여 특정 조건에서 컴퍼넌트 렌더링 하지 않기 1. &&를 이용한 조건부 렌더링 A && B // A와 B가 둘다 true일때 true, 하나라도 false라면 false true && expression 은 항상 expression 으로 실행되고, false && expression 은 항상 false 로 실행된다. JSX 안에는 중괄호를 이용해서 표현식을 포함 할 수 있다. 그 안에 논리연산자 && 를 사용하면 쉽게 엘리먼트를 조건부로 넣을 수 있다. return ( ... {unreadMessages.length > 0 && You have {unreadMessages.length} unread messages. } ... 2021. 8. 20.
반응형

티스토리툴바