utterances-bot commented 5 years ago

1. 컴포넌트 만들기 · GitBook

undefined

https://react.vlpt.us/mashup-todolist/01-create-components.html

kmhan-HENK commented 5 years ago

TodoList.js 파일에서 TodoItem 경로 잘못되었습니다

jinsugoda commented 4 years ago

TodoTamplate 컴포넌트에서 props로 chiledren을 주는 이유가 먼지 잘 모르겠습니다. 그리고 children props 를 주어야 만이 TodoTamplate 으로 감싼 컴포넌트들이 제대로 동작하는데 이것도 이해가 잘 안됩니다. 혹시 제가 잘 못 알고 있으면 설명을 부탁드립니다.

minhee0327 commented 4 years ago

@jinsugoda 님 강사님 강의 중 1장-5.props를 통해 컴포넌트에 값전달하기 마지막 부분을 참조하면 좋을 것 같습니다 ..! 강의안: https://react.vlpt.us/basic/05-props.html 컴포넌트 태그 사이에 값을 조회하고 싶을때, props.children을 사용합니다.

즉, TdoTempate 태그 사이에 있는 TodoHead, TodoList, TodoCreate의 값을 (조회하고자) props.children으로 받아서, 사용한것으로 생각이 듭니다. 여기서는 비구조화 할당으로 props.children대신 children을 사용한 것이구요..!

[리엑트 초보자라..미흡한 답변 달아봅니다 .^^ 혹시 틀렸다면 답변 달아주세요!!]

jinsugoda commented 4 years ago

아,그것은 이해가 되는데 이름을 children 말고 다른 이름으로 주어도 괜잖을거 같은데 다르게 주면 제대로 동작이 안되네요. 즉 child 라던지... 그러면 제대로 동작이 안되는데요. 딱 children 으로 주어야만이 제대로 동작이 가능합니다. 여기에 대해서 알고 있으면 설명좀 부탁드립니다.

minhee0327 commented 4 years ago

저는 상속에서 사용되는 일종의 예약어(키워드)라고 생각했었는데 찾아본 결과 이게 가장 맞는말인것 같아서 가져왔습니다.

'어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올 지 미리 예상할 수 없는 경우가 있습니다. 범용적인 ‘박스’ 역할을 하는 Sidebar 혹은 Dialog와 같은 컴포넌트에서 특히 자주 볼 수 있습니다. 이러한 컴포넌트에서는 특수한 'children prop' 을 사용하여 자식 엘리먼트를 출력에 그대로 전달하는 것이 좋습니다.'

(리엑트 공식문서):https://ko.reactjs.org/docs/composition-vs-inheritance.html 위 공식문서를 참조하시면 조금 더 이해가될것같습니다.

Francismskim commented 4 years ago

강의를 듣고 있는 윈도우사용자입니다. js안의 스타일 선언이 다 주황색으로 머물어, 코드를 읽는데 스트레스가 심하네요. 예를들면 첫번째 App.js 예시에서 등장하는, createGlobalStyle body { background: #e9ecef; } ; 위와 같은 코드에서 body 이하 모든 부분이 다 주황색인데요.. 이걸 강사님 강의에서 처럼 다채로운 색으로 나타나도록 할 수 없을까요?

style.div` 이하의 모든 내용이 주황색으로만 나옵니다. yarn start로 기능테스트를 해보면, 정상적으로 작동은 하는데, 코드를 읽는데 너무 불편하네요.

jaeson-dev commented 3 years ago

@Francismskim vscode extension 설치가 필요합니다. 아마 'vscode-styled-components'를 설치하시면 원하시는 기능 설정이 될겁니다.

dkim0827 commented 3 years ago

@jinsugoda 아직도 관심가지고 계실지는 모르겠지만 제 기준에서 설명드리자면 예악어가 맞아요!! 안 그래도 학생 가르치면서 어떤게 컨벤션이고 어떤게 무조건 해야 하는 예악어인지에 대한 질문이 굉장히 많아서 난감했었는데요..(저는 그냥 거의 외워서 하다 버릇해서...)

hello world

이렇게 들어갈때 html tag 사이에 들어가는 값을 children 이라고 합니다.

위에서 { chidlren } 이라고 적어놓은 부분은 결국 { chidlren } = props

이런식으로 빼온건데요

예시를 들어보자면 App.js

Racing

Person.js const Person = ({ name, age, children }) => { return(

Hi im {name}. Im {age} and my hobby is {children}

) }

보시면 여타 props와 달리 chidlren 은 상위 컴포넌트에서 값을 내려주지 않아도 값을 받아 오는걸 알 수 있습니다!!

만약 자주 보시는 그냥 방법으로 사용하자면 Person.js const Person = (props) => { return(

Hi im {props.name}. Im {props.age} and my hobby is {props.children}

) }

이렇게 되겠네요!!

제가 학생 수업하면서 한 설명을 기반으로 간략히 설명하자면 리액트 = 스타크래프트 html tag = 유닛 컴포넌트 = 부대지정

이라고 설명 했었네요...ㅋㅋㅋ;; 자 봐 매번 쓰는 조합이 있는데 그거 마린 메딕 파이어뱃 하나하나 선택하려면 불편하자네? 그러니까 편하게 계속 쓸수 있게 한 부대로 부대지정 해놓고 계속 부르는거야 그러면 편하겠지? 이렇게 설명 했었네요...

youngbinlim commented 3 years ago

styled-components로 만들면 웹에서 엘리먼트 확인 시 css module 처럼 자체적으로 클래스명 만드는데 클래스명 변환 안 시키는 방법 없나요? 제작 과정에서 많이 불편하네요.

BGM-109 commented 3 years ago

너어무깔끔하네요

JungJoongHwan commented 3 years ago

CSS에 대한 이해가 중요하군요... 다시 CSS로 롤백해서 공부했네요..

oshosh commented 3 years ago

수업듣고 조금씩 참고하듯이 안보면서 짜고 있는데..

css가 약하다 보니... TodoListBlock 설정시에 flex : 1을 준게 정확하게 와닿지 않는데..

width: 100%; height: 100%; box-sizing: border-box;

주는거랑 무슨 차이가 좀 있을까요 ?

sshusshu commented 3 years ago

디자인이 깔끔해서 클론할때 기분이 좋네여 :)

jikimee64 commented 3 years ago

후

creamive commented 2 years ago

2022년 기준, TodoItem 관련 css 수정사항이 있습니다. &:hover 에서 & 삭제와 css 라고 적어준 부분들을 삭제해주면 됩니다. ${props => props.done && (이부분) css border: 1px solid #38d9a9; color: #38d9a9; } `;

creamive commented 2 years ago

앗 {css}를 제가 기입하지 않아서 그런것 같네요;;

hyewonny2327 commented 1 year ago

InsertFormPositioner의 역할은 어떤건가요?? insertForm 과 input만 있어도 똑같게 보이는데 positioner 가 있으면 어떤게 달라지는건지 궁금합니다

velopert / react-tutorial

1. 컴포넌트 만들기 · GitBook #13

1. 컴포넌트 만들기 · GitBook