본문 바로가기
728x90

React24

Composition Open클릭하면 추가로 아래 스타일을 더 적으면 배경이 깔리면서 Open버튼이 보이지 않게 했다 다시 Open버튼이 뜨도록 하려면? Hello아래 버튼을 만든다 OK를 클릭하면 창이 닫힌다 Hello부분을 props.title로 바꾸고 버튼까지 props를 준다 버튼에 스타일을 주고 클릭하면 하고 Open클릭하면 얘를확장해 보면 글자라면 title을 보여주고 글자가 아니면 props자체를 리턴해주는 구조 description도 똑같이 description이 글자라면 안에 있는 것을 쓰고 아니라면 걔를 리턴해라~ 버튼도 똑같이 버튼이 string이라면 안에 있는 것을 리턴하고 아니라면 전달받은 props를 리턴해라~ 동작이 똑같지만 가져다 쓰는것은 다르게 할 수 있는 것 여기서 h1으로 해도 되고 버튼으로.. 2021. 10. 29.
Hooks hook 기본 3가지 = State, Effect, Context 추가 hooks useReducer useCallback useMemo useRef useImperativeHandle useLayoutEffect useDebugValue 위 hook들 외 내가 어떤 동작을 하게 하고 싶다면 위 Hook들을 기반으로 새로운 hook을 만들어서 사용하면 '커스텀 hook' 클래스 컴포넌트에는 Hook 사용할 수 없다 state로 만들면 Reducer로 하면 이렇게 만들어도 하는 역할은 똑같다 그럼 왜 Reducer를 만들까? 0이면 짱구, + 하면 철수, - 하면 맹구의 이름으로 바뀐다 State에서는 Reducer보다 더 많은것들을 적어야 작동한다 그래서 Reducer를 사용하는 것 useState: 이.. 2021. 10. 28.
Props, State Props 여기서 이미지를 추출하겠다~ 라는 컴포넌트를 만들고 위로 올라가서 펑션으로 아바타를 만든다 img는 아까 복사한것! (user로 바꿈) 아까 만든 아바타에 유저=프롭스.유저를 넣는다 UserInfo도 똑같이 하려면? 잘라서 위로 올린다 user로 바꾼다 Props = 컴포넌트에 전달되는 단일 객체 순수 함수처럼 동작 = Props 자체를 수정해서는 안됨 컴포넌트 합성 = 여러 컴포넌트를 모아서 컴포넌트 추출 = 여러곳에서 사용되거나, 복잡한 경우 State 클래스와 함수 컴포넌트 2021. 10. 28.
클래스형, 함수형 컴포넌트에서 state를 사용하려면? 클래스형에서는 componentDidMount와 componentWillUnmount가 따로지만 함수형에서는 useEffect를 사용해서 하나로 합칠 수 있다. 다른 것도 차이가 있다. 2021. 10. 21.
props를 사용해서 코드들을 줄이고 싶다면? 2021. 10. 20.
uncontrolled, controlled 폰 번호 0으로 시작하면 Good 0으로 시작하지 않으면 Bad로 만들기 submit을 눌러야만 나오게 했는데 숫자를 칠때마다 나오게 하려면? 0으로 시작하지 않을 때 setMessage로 잘못 입력하고 있다고 나타나게 하기 내가 친 번호 submit 눌렀을 때 alert으로 나타나게 하기 서브밋을 특정값을 입력 할 때만 누를수 있게 하고싶다면? 그런데 0만 치면 안열림! 드래그 되어있는 setPhoneNumber(event.target.value); ->> 처리해야함 setPhoneNumber(event.target.value); 아래로 내리고 마우스 커서 있는 if에서 폰넘버를 바꾼다 0으로 시작하지 않는 값을 입력이 되지 않게 하려면? if { 안에 올리고 } p태그에 폰넘버를 적는다 그럼? 0으로.. 2021. 10. 19.
728x90