[꼼꼼한 개발자] 꼼코더

🧹 두서없이 적는 쉬운 정리 1. State는 리액트 컴포넌트의 변경 가능한 데이터. 2. Class 컴포넌트의 생성자에서는 추후 사용할 데이터를 state에 넣어서 초기화한다. 3. state를 업데이트하기 위해 setState() 함수를 사용. 4. 클래스 컴포넌트에서 컴포넌트의 생명, 인생, 죽음을 의미하는 함수를 사용할 수 있다. (componentDidMount(), componentDidUpdate(), componentWillUnmount() 5. map() 함수를 사용시 엘리먼트를 구분하기 위하여 key 값을 필수적 넣어야 한다. (자세한 내용은 아래 참고) 😊 실습 시작 클래스 컴포넌트로 스테이트 와 생명주기 함수를 직접 사용해 보도록 하자 🧑🏻‍💻 Notification 컴포넌트 생성 ..

🧹 두서없이 적는 쉬운 정리 1. State는 리액트 컴포넌트의 변경 가능한 데이터. 2. Class 컴포넌트의 경우 생성자 함수를 가지고 있고 State를 생성자에서 정의한다. 3. 리액트 컴포넌트는 생명주기를 갖고 있다.(출생 - 인생 - 사망) 4. 컴포넌트는 계속 존재하는 것이 아닌 시간의 흐름에 따라 생성되고 업데이트 후 사라진다. (자세한 내용은 아래 참고) 👀 시작 이 글은 지금은 자주 사용하지 않는 클래스 컴포넌트와 관련된 내용이지만 중요한 개념들이 있으니 정리해 보자. 스테이트라는 개념은 함수 컴포넌트에서도 사용하기에 개념을 확실히 이해하고 넘어가는 것이 좋다! 🫨 State란? State는 리액트 컴포넌트의 상태를 의미한다. 리액트 컴포넌트의 변경 가능한 데이터를 State라고 부른다...

🧹 두서없이 적는 쉬운 정리 1. 컴포넌트 안에 여러개의 컴포넌트를 사용할 수 있다. 2. 컴포넌트 속 css적용이 가능하다. 3. 컴포넌트를 동적으로 변경려면 props 추가 4. 여러 중복 데이터는 배열로 관리하고 .map()함수로 추출. (자세한 내용은 아래 참고) 🕵🏻 댓글 컴포넌트 실습 1. Comment라는(댓글) 이름의 리액트 함수 컴포넌트 생성 2. 여러 개 댓글(Comment) 컴포넌트를 포함하고 있는 댓글 목록(CommentList) 컴포넌트 작성 3. 리스트 컴포넌트를 실제로 화면에 렌더링 하기 위해 index.js 수정. 4. 리액트 애플리케이션 실행 🎨 댓글 모양 CSS 스타일 적용 5. 댓글 모양 처럼 보이도록 Comment 컴포넌트에 css 스타일을 작성 후 컴포넌트 코드 변경..

🧹 두서없이 적는 쉬운 정리 1. 함수 컴포넌트는 정말 함수처럼 생겼다. 2. 리액트 컴포넌트는 클래스 컴포넌트와 함수 컴포넌트로 나뉜다. 3. 모든 클래스 컴포넌트는 React.Component를 상속받아서 만든다. 4. 컴포넌트 생성 시 첫 글자는 대문자여야 한다.(소문자는 HTML 태그로 인식됨) 5. 이렇게 만들어진 컴포넌트는 엘리먼트를 출력하고 렌더링을 통해 브라우저에 보이게 된다. (자세한 내용은 아래 참고) 🎅🏻 Components의 역사 리액트 컴포넌트는 아래 그림처럼 크게 클래스 컴포넌트와 함수 컴포넌트로 나뉜다. 초기 버전에는 클래스 컴퍼넌트를 주로 사용하였다. 하지만 클래스 컴포넌트가 사용하기 불편하다는 의견이 많이 나와 함수 컴포넌트를 주로 사용하게 되었다. 함수 컴포넌트를 개선하는..

🧹 두서없이 적는 쉬운 정리 1. Props의 중요한 특징은 Read-only 즉 읽기 전용이므로 변경이 불가하다. 2. 다른 Props의 값으로 엘리먼트를 생성하려면새로운 Props 값을 컴포넌트의 전달하여 새로 엘리먼트를 생성하면 된다. 3. 위 과정에서 엘리먼트가 다시 렌더링 된다. 4. Props의 값을 넣을 때 문자열 이외 [정수 변수 그리고 다른 컴포넌트 등]이 들어갈 경우 중괄호 {} 를 사용해서 감싸 주어야 한다. 5. Props는 자바스크립트 객체가 된다. 6. JSX 를 사용하는 경우에는 간단하게 컴포넌트의 Props를 넣을 수 있다. 7. JSX를 사용하지 않는경우에는 React.createElement()를 사용하면 된다. (비추천) (자세한 내용은 아래 참고) Props의 특징 P..

🧹 두서없이 적는 쉬운 정리 1. 리액트는 컴포넌트 기반의 구조가 특징이며 모든 페이지가 컴포넌트로 구성되어 있다 2. 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성될 수 있다. 4. 다시 말해 컴포넌트들은 마치 내고 블록을 조립하 듯 끼워 맞춰 새로운 컴포넌트를 만들 수 있다. 5. 재사용성 코드 양 감소로 인하여 자연스레 개발 시간과 유지보수 비용도 줄일 수 있다. 6. 컴포넌트는 자바스크립트의 함수와 비슷한데 입력은 Props라는 것이고 출력은 리액트 엘리먼트이다. 7. 컴포넌트는 만들고자 하는 대로 Props 즉 속성을 넣으면 해당 속성에 맞춰 화면에 나타난 엘리먼트를 만들어 주는 것 8. 하나의 컴포넌트로 여러 개의 엘리먼트를 찍어낼 수 있다.(붕어빵 틀 -> 붕어빵(슈크림, 팥..

🧹 두서없이 적는 쉬운 정리 1. Elements는 한번 생성되면 변하지 않는다는 불변성을 가지고 있다. 2. 다른 말로 엘리먼트 생성 후에는 children이나 attributes를 바꿀 수 없다는 말 4. 엘리먼트를 생성한 이후에 실제로 화면에 보여주기 위해서는 렌더링이라는 과정을 거쳐야 한다 5. 리액트로만 만들어진 모든 웹사이트들은 단 하나의 Root DOM Node를 가지게 된다 6. 렌더링을 위해 ReactDOM에 render()라는 함수를 사용 7. 이 함수는 '첫번째 파라미터인 리액트 엘리먼트'를 '두 번째 파라미터인 html 엘리먼트'에 (즉 DOM 엘리먼트) 렌더링 하는 역할 8. 결국 리액트 엘리먼트가 렌더링 되는 과정은 Virtual DOM에서 실제 DOM으로 이동하는 과정 9. 한..

🧹 두서없이 적는 쉬운 정리 1. Elements란 리액트 앱을 구성하는 가장 작은 블록들 2. 실제 브라우저 DOM에 존재하는 엘리먼트 > DOM 엘리먼트, 리액트 Virtual DOM 존재하는 엘리먼트 > 리액트 엘리먼트 3. 리액트 엘리먼트는 DOM 엘리먼트의 가상 표현버전 4. Elements의 역할은 화면에서 보이는 것을 기술 5. 리엑트는 React.createElement()를 통해서 만든 엘리먼트를 이용해서 실제 우리가 화면에서 보게 될 DOM 엘리먼트를 생성 6. 리액트 엘리먼트는 자바스크립트 객체 형태로 존재하며 마음대로 변경할 수 없는 불변성을 갖고 있다 7. createElement() 3가지의 파라미터(type, props, children) 8. type에는 html 태그와 리액..