Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[2주차] 이성진 학습 PR 제출합니다. #13

Open
wants to merge 5 commits into
base: main
Choose a base branch
from

Conversation

leesj0188
Copy link
Contributor

✅ 학습 내용 요약

  • JSX의 문법과 Javascript와 다른점, 사용법과 state와 props를 직접 코딩해보면서 작동방식에 대해 공부하였습니다.

🤔 고민했던 부분

  • props의 사용법에 있어 상위 컴포넌트와 하위 컴포넌트를 연결하는 부분에 있어 헷갈리는 부분이 있었으나 직접 코딩해 보니 알 수 있었습니다.

🔊 도움이 필요한 부분

  • state가 불변성을 유지해야하는 이유가 궁금합니다. 검색을 해봤는데 이해가 안되네요..

Copy link
Member

@keemsebin keemsebin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

불변성과 관련해서는 closer에 대해 먼저 학습하고 useState가 어떻게 구현되어 있는지 공부해보시면 좋을 것 같습니다.

리액트를 공부하기 전에 리액트의 어떤 장점 때문에 리액트를 많이 사용하는지, 그렇다면 리액트의 단점은 무엇인지, 해당 단점들을 어떻게 커버할 수 있을 지 생각해보면 좋을 것 같아요. 수고하셨습니다.

week02/이성진/[2주차] 이성진.md Show resolved Hide resolved
week02/이성진/[2주차] 이성진.md Outdated Show resolved Hide resolved
week02/이성진/[2주차] 이성진.md Outdated Show resolved Hide resolved
week02/이성진/[2주차] 이성진.md Show resolved Hide resolved
week02/이성진/[2주차] 이성진.md Outdated Show resolved Hide resolved
week02/이성진/[2주차] 이성진.md Outdated Show resolved Hide resolved
week02/이성진/[2주차] 이성진.md Outdated Show resolved Hide resolved
week02/이성진/[2주차] 이성진.md Outdated Show resolved Hide resolved
week02/이성진/[2주차] 이성진.md Show resolved Hide resolved
week02/이성진/[2주차] 이성진.md Outdated Show resolved Hide resolved
@swgvenghy
Copy link
Contributor

🔊 도움이 필요한 부분

  • state가 불변성을 유지해야하는 이유가 궁금합니다. 검색을 해봤는데 이해가 안되네요..
  • 참조비교라는 개념이 있습니다! 해당 개념에 대해 찾아보셔도 좋을 것 같아요!
  • state의 불변성을 유지하지 않는다면 참조비교를 하는 리액트에서는 변화를 감지하지 못하고 같은 값으로 인식합니다.
  • setState를 사용하면 새로운 값을 할당하기에 기존 state와 다른 메모리 주소를 가지고 있을 것이고 변화한 값으로 반영이 됩니다.

Copy link
Contributor

@swgvenghy swgvenghy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

리뷰 답변달기 및 수정부탁드립니다

week02/이성진/todo/src/App.jsx Outdated Show resolved Hide resolved
week02/이성진/todo/src/App.jsx Outdated Show resolved Hide resolved
week02/이성진/todo/src/component/TodoBoard.jsx Outdated Show resolved Hide resolved
week02/이성진/todo/src/component/TodoItem.jsx Outdated Show resolved Hide resolved

function App() {
const [inputValue,setInputValue] = useState('')
const [todolist,setTodolist]=useState([])
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

전체적으로 일관성있게 카멜케이스 적용하면 좋을 것 같아요.

4. **JSX는 반드시 하나의 부모태그가 감싸는 형식이어야 한다**.
- React 내에서 Virtual DOM이 내부의 요소들의 변화를 감지할 때, 효율적인 비교를 위해 DOM 트리를 구성해야 한다. 따라서 코드를 작성할 때 **<div>** 로 감싸주어야 한다.

5. **모든 프로퍼티의 표기는 CamelCase로 작성한다.**
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

다른 네이밍 규칙에는 어떤 것이 있을까요??
컴포넌트 명명 규칙은 무엇일까요 ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants