본문 바로가기

컴포넌트4

[React] Rerendering(리렌더링) 리액트를 공부하다보면, 효율성이라는 단어를 빼놓을 수가 없는 것 같다. 저번에 정리했던 DOM에서의 가상 돔도 그렇고, 어떤 한 개념을 공부할 때마다 그 개념이 효율적이게 도와준다고 하는 것이 많다는것이다. 나는 전에 이런 질문을 받은 적이 있다. '리렌더링이 뭔지 아시나요?' 이 글을 보는 여러분들은 무슨 대답을 하겠는가? 나는 그때는 부끄럽지만 리렌더링이 그냥 렌더링을 다시한다는 거 아닌가? 이렇게 생각했었다. 사실 말 뜻은 그렇다. 하지만, 질문의 의도가 과연 진짜 뜻을 물어보는 것이었을까? 이때 모든 질문에 답을 개떡같이 한 나는 집에 와서 차분히 다 적어놨었다. 그리고 다시 공부하면서 채워나가기 시작했다. 리렌더링은 무엇인지 근본부터 알아야하며, 왜 이걸 알아야하는지, 어디에서 이 개념이 쓰이는.. 2021. 6. 24.

[React] 투두리스트 컴포넌트 구조&코드 분석 📖리액트를 다루는 기술을 통해 공부한 내용을 바탕으로 작성한 포스트입니다.📖 오늘은 그동안 배웠던 컴포넌트들을 중심으로 할 일을 작성하고 기록하는 투두리스트를 만들어보았다. 처음으로 컴포넌트를 사용해서 완성된 한 페이지를 만들어보는 거라 예제를 따라하면서도 컴포넌트간의 구조와 세세하게 쓰이는 속성들에 관해 더 자세하게 알고 싶었다. 그리고, 코드를 작성하는데 있어 궁금한 부분들이 많이 있어서 정리해보았다. 일단 정리한 부분은 투두리스트의 컴포넌트 구조 import cn from {classnames}; 리액트로 만든 투두리스트 코드 원래는 코드를 다 따로 올리려고 했지만, 만든 파일도 많고 하다보니 가독성이 떨어질 것 같다는 판단하에 깃헙을 올리는 게 더 나을 것 같다. github.com/MinJoo-.. 2021. 1. 11.

[React] 함수형 컴포넌트 VS 클래스형 컴포넌트 안녕하세요. 오늘은 컴포넌트에 대해서 알아보겠습니다. 컴포넌트는 인터페이스를 설계할 때 사용자가 볼 수 있는 여러가지 요소들을 뜻합니다. 컴포넌트는 props를 받아서 elelement를 출력하는 함수와 같습니다. 이러한 컴포넌트를 선언하는 방식으로는 두가지가 있습니다. 바로 함수형 컴포넌트와 클래스형 컴포넌트! 과연 둘은 어떤 차이가 있고, 어떤 기준으로 사용할 컴포넌트를 정하는게 좋을까요? 저는 이에 대한 내용을 '리액트를 다루는 기술' 책과 리액트 공식문서를 사용하여 공부했습니다. (ko.reactjs.org/docs/components-and-props.html#function-and-class-components) 제가 이해한 개념을 쓰는 것이기 때문에, 틀릴 수도 있다는 점! ✔코드비교 //함.. 2020. 12. 29.

[React] JSX ❗아래 내용은 [리액트를 다루는 기술] 책에서 공부한 내용을 요약하였습니다. JSX란 자바스크립트의 확장문법이며, XML과 매우 비슷하게 생김 JSX를 사용하면,,, 편하게 렌더링 가능 HTML코드와 유사해서 보기 쉽고, 익숙 컴포넌트를 HTML태그 쓰듯이 사용하면서 활용도가 높음 예시) import React from 'react'; function App(){ return( 리액트 안녕! 잘 작동하니? ); } export default App; 위의 코드처럼 h1태그와 h2태그가 div태그 하나로 감싸져있다. 이렇게 리액트 컴포넌트에서 요소 여러 개를 하나의 요소로 감싸는 이유? 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문 조건부 연산자 JSX 내부의 자바스크립트 .. 2020. 12. 23.

이전 1 다음

티스토리툴바