[2주차] 최원빈 학습 PR 제출합니다. #16
Conversation
ChoiTheCreator
requested review from
swgvenghy,
ujinsimSS and
keemsebin
as code owners
week02/최원빈.md
Outdated
|
|
||
| ### 큰 두 단계를 거치면서 렌더링을 한다. | ||
|
|
||
| <img width="421" alt="스크린샷 2024-10-08 오후 10 49 53" src="https://github.com/user-attachments/assets/4ab7a660-8b45-41de-908b-af2ca5 |
There was a problem hiding this comment.
이 부분 사진이 생략되어있습니다. 필요한경우 추가해주세요!
There was a problem hiding this comment.
네 방금 수정했습니다 !!! 감사합니다!
week02/최원빈.md
Outdated
| 이 조정 과정때 실제 HTML요소를 생성후 렌더링 한다. | ||
|
|
||
| <img width="396" alt="스크린샷 2024-10-08 오후 10 50 00" src="https://github.com/user-attachments/assets/4d1fd1e7-9858-4462-a24c-252ed86e3a20"> | ||
| 0886d1"> |
There was a problem hiding this comment.
네 삭제완료했습니다 감사합니다!!!
week02/최원빈.md
Outdated
| 1. 변동가능성이 높은 변수인 likes를 state변수로 초기화했다. | ||
| 2. span : 따봉버튼을 눌렀을때, likes라는 state 변수의 변화가 일어나야한다. | ||
| 3. span 내부에 onClick 이벤트 핸들러 넣어, likesFunction이라는 함수를 실행시키게한다. | ||
| 4. likesFunction 이라는 함수는 likesChange라는 state 내부 함수의 값을 바꾸게 한다. |
There was a problem hiding this comment.
일반적으로 상태변경함수를 set~~으로 명시합니다. 이 부분 참고해주시고
왜 state를 직접 변경하지않고 state변경함수를 사용하여 state의 상태를 변경할까요?
There was a problem hiding this comment.
네 앞으로 작명할때 참고하겠습니다!
state 변경 함수를 활용하면, 상태가 변경 될때 이전 상태와 새로운 상태를 비교하여 변경된 부분만 업데이트하는 방식으로 구동되기에 성능적으로 이점이 있다고 생각합니다.
또한 상태 함수로 상태 변경의 추적이 쉬워집니다. (실제로 개발자 도구에서 상태 변경을 시작적으로 확인하는 과정)을 참고해서 코드를 짰습니다.
아직은 정확히 감을 못잡았으나, 리액트의 상태 변경 함수는 비동기적으로 작동한다고 알고있는데, 변경 후의 상태 파악이 좀 더 용이할것 같습니다.
week02/최원빈.md
Outdated
|
|
||
| ### Spread Opreator → …arr | ||
|
|
||
| 자료형을 독립적인 복사를 할때 활용한다. |
There was a problem hiding this comment.
복사를 말할 때 얕은복사, 깊은복사를 이야기하곤 합니다. 해당 경우에는 어떤 복사일까요?
There was a problem hiding this comment.
Javascript에서 concat, spread, push는 어떤 차이가 있을까요 ?
| setTodos(updatedTodos); | ||
| }; | ||
|
|
||
| return ( |
There was a problem hiding this comment.
해당 부분을 몇가지 컴포넌트로 나눌 수 있을 것 같아요. 만약 나눈다면 어떻게 범위를 나누어 컴포넌트로 나누실건가요?
week02/최원빈.md
Outdated
|
|
||
| ## 형식 | ||
|
|
||
| JSX는 <div>, <h1>, <p> 등과 같은 HTML 태그를 사용할 수 있으며, JavaScript 표현식을 중괄호 {}을 넣어 동적으로 값을 삽입할 수 있다. 이를 데이터 바인딩이라 한다. |
There was a problem hiding this comment.
<div>, <h1> 태그들을 md파일에 작성하면, 브라우저에서 HTML 태그로 해석됩니다. 수정해주세요.
week02/최원빈.md
Outdated
| </div> | ||
| ``` | ||
|
|
||
| ### 실제 사용 예시 |
There was a problem hiding this comment.
잘못 작성한 것 같네요. 다시 학습 후 수정해주세요.
week02/최원빈.md
Outdated
| let [a, b] = useState('이제 활용해보자'); | ||
| ``` | ||
|
|
||
| ## #1. 변수 문법이 있는데 굳이 state를 써야하는가? |
There was a problem hiding this comment.
관련해서는 closer 에 대해 공부해보는 것 추천드립니다.
week02/최원빈.md
Outdated
| <div>{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in.</h1>}</div> | ||
| ); | ||
| } | ||
| ``` |
There was a problem hiding this comment.
isLoggedIn이 null이면 어떻게 될까요??
렌더링이 되지 않게 하려면 어떻게 하는 게 좋을까요 ??
또한 조건부 렌더링 방법에는 어떤 것이 있을까 알아보면 좋을 것 같습니다!
week02/최원빈.md
Outdated
|
|
||
| 동적표현도 훌륭하게 구성가능하며 컴포넌트화로 유지보수가 쉽다. | ||
|
|
||
| ### 조건부 랜더링 |
week02/최원빈.md
Outdated
|
|
||
| ### Spread Opreator → …arr | ||
|
|
||
| 자료형을 독립적인 복사를 할때 활용한다. |
There was a problem hiding this comment.
Javascript에서 concat, spread, push는 어떤 차이가 있을까요 ?
week02/최원빈.md
Outdated
| import { useState } from 'react'; | ||
|
|
||
| function App() { | ||
| let [a, b] = useState('이제 활용해보자'); |
There was a problem hiding this comment.
모두 let으로 선언하신 이유가 궁금합니다 !
✅ 학습 내용 요약
React Rendering 방식
• 렌더링: React는 컴포넌트를 기반으로 동작하며, 각 컴포넌트는 UI의 일부를 정의합니다. 컴포넌트가 렌더링되면 그 내부의 JSX가 HTML로 변환되어 브라우저에 표시됩니다.
• 가상 DOM: React는 변경 사항을 효율적으로 처리하기 위해 “가상 DOM”을 사용합니다. 상태(state)나 속성(props)이 변경되면 React는 가상 DOM에서 변경 사항을 감지하고, 실제 DOM에 최소한의 변경만 적용하여 성능을 최적화합니다.
State
• 정의: state는 컴포넌트의 상태를 저장하는 객체입니다. 각 컴포넌트는 자신의 state를 가지고 있으며, 이는 동적으로 변경될 수 있습니다.
• 변경: state는 직접 변경할 수 없고, 항상 setState 또는 useState와 같은 함수를 사용하여 업데이트해야 합니다. 이로 인해 React는 변경 사항을 감지하고 리렌더링할 수 있습니다.
• 예제: 사용자 입력, API 응답 등의 동적인 데이터를 관리할 때 주로 사용됩니다.
Props
• 정의: props는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달하는 방법입니다. props는 읽기 전용이며, 자식 컴포넌트에서 변경할 수 없습니다.
• 사용법: 부모 컴포넌트에서 자식 컴포넌트를 렌더링할 때 속성으로 값을 전달합니다. 자식 컴포넌트는 이를 props로 받아서 사용합니다.
• 예제: UI의 다양한 요소를 동적으로 만들기 위해 자주 사용됩니다. 예를 들어, 버튼의 텍스트, 이미지 URL 등을 props로 전달할 수 있습니다.
JSX
• 정의: JSX는 JavaScript XML의 약자로, JavaScript 코드 안에서 HTML과 유사한 문법을 사용하여 UI를 정의할 수 있게 해주는 문법입니다.
• 특징: JSX는 JavaScript 표현식을 포함할 수 있으며, 이를 통해 동적인 UI를 쉽게 생성할 수 있습니다. React는 JSX를 사용하여 컴포넌트를 정의하고 렌더링합니다.
• 예제:
🤔 고민했던 부분
학습/과제 진행 간 고민한 포인트가 있다면 적어주세요.
todo list를 리액트로 구현하는게 자연스럽지가 않았습니다.
또한, state props 중요한 문법을 글로만 익히기가 쉽지가 않았습니다.
고민을 어떻게 생각하고 이를 어떻게 해결하였는지에 대해서 공유해주세요.
그에따라 저는 간단한 블로그를 리액트로 제작하였습니다.
따라서 개념 정리할때도, 텍스트 + 코드를 함께 작성하려고 노력했습니다.
물론, 강의를 참고하여 하였기에 무척 수동적인 측면이 없지 않았으나,
여러 개념들과 함께 혼자 코드를 짜보니 상당히 흥미로웠습니다.
사실 코드를 짜면서 처음 리액트를 짜다보니 기존의 js코드를 짜는 방식에서 아직 잘 못 벗어난거 같다고 느꼈습니다.
그리하여 처음엔 Js파일로 todolist를 만들고, 그 이후 jsx파일로 변환하는 과정이 상당히 쉽지 않았습니다.
특히 {} 로 데이터 바인딩을 하는 과정이 자연스럽지가 않습니다.
5년 내내 = 로 데이터 바인딩을 하다보니, {}를 연속해서 쓸때 상당한 혼란이 왔습니다.
그래도 확실히 매력적인 언어다 라는것을 깨달았습니다.