[TIL] 23/11/10 React 숙련: 부분 렌더링 연습

TIL / 한 일

standard 반 수업

- react 입문 수업 개념정리

- 부분렌더링

---

부분렌더링

변수 state에 따라 보이고 안보이고 구현 하기

1) 해당 값의 변화에 따라 렌더링이 좌우 되니까, state로구현한다.

const [isTodoShown, setIsTodoShown] = useState(true);
const [isDoneShown, setIsDoneShown] = useState(true);

 

2) 버튼

보이고 안보이고 선택해주는 버튼을 누르면 상황에 따라 setState 해줌.
onClick 이벤트 핸들러는 인라인 함수로 구현했다.

 <button onClick={() => {
  setIsTodoShown(true);
  setIsDoneShown(true);
}}>전체</button>
<button onClick={() => {
  setIsTodoShown(true);
  setIsDoneShown(false);
}}>할일</button>
<button onClick={() => {
  setIsTodoShown(false);
  setIsDoneShown(true);
}}>완료된일</button>

 

3) 변수 상태에 따라 보여주기
true 이면 <TodoList /> 컴포넌트를, 아니면 "" 빈 칸을 보여준다.

{isTodoShown === true ?
  <TodoList todos={todos} setTodos={setTodos} isDone={false} /> : ""}
{isDoneShown ?
  <TodoList todos={todos} setTodos={setTodos} isDone={true} /> : ""}

 

 

과제 중

아직 그냥 css 놀이.. 끄적 끄적

2023.11.13 - [javascript] - [javascript][css] border-radius / 메뉴모양 만들기

[javascript][css] border-radius / 메뉴모양 만들기

 

 

할 일 / 부족한 점

개념정리 다시 내 말로 표현하기 !

내 말로 표현할 수 없으면 모르는게 맞아, 왜이렇게 모르는게 많을까~~