phone-book-v2
각 태그들에 들어있는 문자열이나 데이터들을 뽑아내는 방법
tr태그에서 클릭이벤트가 발생하는게 아니라 품고있는 td태그들이 실행됌
tr의 0번노드에 있는 td의 문자열을 뽑아서 name이라는 변수에 저장함
id 는 datai-id라는 값을 추출하는 방법
tr태그의 data-id의 value를 추가해서 id에 담은것!
데이터를 뽑아내는 방법!!
reducer에 보내고
여기서 받고 state 변수에 보냄!
>> PhoneList.jsx
제일 중요한 개념은 use로 시작되는 함수 (HOOK 함수라고도 함)
todo-list
rcc(클래스타입!)는 component를 상속받아서 사용해야함!
render라는 method가 return문을 감싸고 있고
class로 시작하고 반드시 componet라는 친구를 extends하고 있담
함수방식에선 바로 return문이! (App.js 와 비교한거)
>> TodoMain.jsx
리액트에서는 파일이나 클래스만들때 대소문자 구별 잘해야하고
css적용할 파일과 이름을 같이 함!
todo-item에 마우스가 올라가면 delete-item이 나타나는 코드!
감싸고있는 태그에 hover를 주고 실제 반응하는건 그 내부에 있는 태그가!
>> TodoItem.css
이 클래스에서 만든 state todoList 변수를 TodoList 컴포넌트에 보내라!
state 변수가 여러개면 {this.state}라고 해도됌~!
state 변수는 만든곳에서 변경할수있음 추가 변경 삭제 가능
근데 state 변수는 childComponent에 전달 받은 순간 props라는 변수로 바뀌게 되어서 ReadOnly가 된다!!!
나는 props를 todolist라는이름으로 쓰겠다!
함수방식에서도 그렇게했음
함수방식에서는 변경하려면 변경할 함수까지 같이 보내야했음
>> TodoList.jsx ,Main
todoList에서 todoItem으로 변수 보내깅
map 사용하려면 key 가 필요하다!
>> TodoList.jsx > TodoItem.jsx
클래스 이름을 문자열이 아닌 변수화 시키기
만약에 isCom이 true이면 todo text checked라고 만들으라는 이야기
그럼 클래스 이름이 두개가됌
연산식을 작성할땐 "" 가 아닌{} 로 묶어줌
이렇게 생성!!!!
todo.isComplete가 트루이면 저 div가 생기도록!
그러면
이렇게 된다~!~~
&& 는 앞이 TRUE이면 뒤에꺼 안보고
>> TodoItem.jsx
word-break
break-all
문자열이 영문일 경우 어떻게 줄바꿈을 할래??
한글일 경우는 한글자 단위로 줄바꿈을 해도 좋다
keep-all
한글일 경우 단어(공백)단위로 줄바꿈을 하라
>> TodoItem.css
원래있던 값을 반대로 담아라
ex) x = not false하면 x= t
x = not x 하면 x= f
x= not x 하면 x=t
현재있는 값과 반대로 전환하라 이소리임!!
>> TodoMain.jsx
함수형은 함수안에서 변수선언이 되고
클래스형은 reder밖에서 변수 선언 함
클래스는 그리고 반드시 가져다 쓸때 this.를 붙여줘야하고
state변수를 쓸 때는 this.state.변수 써야함!
매개변수를 받아들이는 클래스형 방식
내가만듣 props통해서 받은 친구들은 this.라는 키워드를 받지 않는다.
매개변수를 받아들이는 함수형 방식!
꺼꾸로 매개변수 만드는 방식은
사용할 곳에서 함수 만들어서해주고
바로위에 매개변수 받은 props에 넣고
다시 리스트 컴포넌트에 추가해주고
메인에와서 추가!!
Item > List > Main 순으로 갔움!!
'JavaScript > React' 카테고리의 다른 글
| [20.11.13 react-bbs , Node_bbs_server] ejs, jsp, http, express 세부 설명 (app.js,www 파일 코드 설명) (0) | 2020.11.16 |
|---|---|
| [20.11.12 bucket-list] Life Cycle Method (0) | 2020.11.16 |
| [20.11.10 phone-book-v2] 전개연산자, object, action (0) | 2020.11.10 |
| [20.11.09 phone-book-v2]useEffect함수, 애니메이션 미디어쿼리 웹접근성, CRUD 구현 (0) | 2020.11.09 |
| [20.11.03 react-phone-book] 파사드패턴(리액트 패턴),props,useState,useRef (0) | 2020.11.03 |