react

그래서 리액트가 뭔데? 라이브러리, 조합형. JSX문법을 씀. 컴포넌트 단위로 잘나눠야함

prpos 로 상위에서 하위로 내려줄수있음. 루트요소에 리턴해주는게 중요하군. 모듈단위로 잘 나눠야한다. Example 같은 컴포넌트 작성의 네이밍 규칙도 있고, 컴포지션(합성)의 개념이라는 것도 있다. 스타일이 중복되고 재사용되는걸 아 이렇게 표현하는구나. 다 비슷비슷하네 묶어주는걸 의미하는군 children 이란 예약어가 있어 와 이걸 이제알았어. props.children ...ㅠㅠ 어쩐지 여기저기서 말도안하고 쓰더라 .. 요즘은 모든 파일에 react import 하진 않는구나. 과거엔 reactCreateElement 같은것도 있었군. JSX 문법은 대안이었구나. 하지만 명시적으로는 import react 다 써주는게 좋군. 컴포넌트 파일 구성은 보자... 그냥 정리하는거네 체계적인 폴더구분이 중요. state. ... 선언적 접근법...  인터렉티브의 기본이라. 모듈로 이벤트 정의 상태변경의 핵심은 이벤트를 어떻게 전달하는냐겠지. on으로 시작하는 이벤트들이 JSX에 내장되어있어. 이게 중요하네. 함수를 컴포넌트에 바인딩하는것. 그럼 이벤트 리스너에 등록 된다. 이걸 헨들러 방식이구나. () 로 해버리면 실행되니 주의.(포인터로 전달됨) 함수 이름의 관례는 뭐시기핸들러(clickHandler) 프로젝트에 따라 알아서 할것. 클릭핸들러가 컴포넌트에 반영된것이 왜 적용이 안된걸까 DOM에? 리액트는 이런식으로 동작하지 않음... 펑션콜을 React에서 평가할 때 실행 순서가 다르구나. 그럼 어캐바꾸는데? ㅇㅇㅇ.. 재평가 되는 방법은 state를 쓰는거구나 그래서 아ㅏ아....... 어쩑지 트리거되지 않았군 그래서 ..useState 라는 훅을 쓰는거구만 그냥 썻더니 아휴... 재호출되도록 하는 좋은 친구ㅏ. 배열과 업데이트 함수가 순서대로 인자에 반환됨.  그래서 title, setTitle 썼던거구나. 뷰랑 다르네 ㅇㅇ.. 스벨트가 좋다. 아무튼 훅으로 관리한다는 개념이 저런거구나.. state를 다시 보네 여기서. ㅇㅋㅇㅋ.재평가됨. 평가는 예약인것이고 바로 바뀌지 않는다. UX에서는 후에 바뀌기때문에 반영되는 개념을 기억해. 재평가 되는 과정은 빠름. 키컨셉임. const로 쓰는 이유는 컴포넌트 인스턴스로 등록하기 때문인거같은디? 변경되지 말라고 하는거 아냐? ㅇㅇ.. 그렇네. 잘못건드릴수있으니 특정 컴포넌트에서만 재평가하라고. 다른곳에 영향받지말라고. 결론은 useState 훅에 상태를 잘 등록해두자. 그리고 초기상태를 추적하는 형태가 있으니, state 추적이 가능한거군. 상태값과 업데이트함수를 기억해! 자. 이건 또 여러가지 로 업데이트 될 수 있구나. 입력값을 위한 폼 모듈에 대해 export default 로 정의한다. (하나밖에없으니까 ㅇㅅㅇ) 폼 만드는건 기본적이고... 잘 분리해서 관리하면 좋다. 사용자 입력은 어찌 관리하나... onChange 같은걸로 하긴 하네. changeHandler 에는 자동으로 event 가 넘어와 편리하긴하구나.state 다중관리도 있는데.... 방법은 뭐 useState 여러번 쓰는거아닌가맞네ㅋㅋㅋ event.target.value 오랫만~  컴포넌트당 여러 상태를 가지는것은 좀 중요한듯... 근데 이 대신 쓰는 방법이 있다. 대안 대안 대안...같은개념으 반복되니 객체로 전달하면 한번에 된다. 아... 1키에 1벨류로 잘 관리하게 하려면 업데이트하지 않은 값은 수동으로 복사하는 구린 방법이 있는데, 아니면 스프레드연산자로 ...값을 잃어버리지 않게 채워주면 되네. *구려
흠...  좋은 방법의 이전 state에 의존하는 state 갱신은? function으로 이전 상태와 다음 상태를 업데이트하면서 얻는 방법이군.... prevState 개념이 이렇게 들어오는구나. 잘못된 스냅샷 상태를 손수 관리하는건 수동적일 수 있으니 함수로 작업하도록 하는게 좋다.

onSubmit에 핸들러 다는것도 있고...근데 이벤트가 쏴 지면 안되니까 .event.preventDefalut()로 만들어서 디폴트 시켜버리는구나. 쏘지말라고 ㅇㅇ.. 양방향바인딩~~~~ useState로 저장한 경우, 값을 초기화 하고 싶은데~ value를 초기화 하면 되겠지. 어... 어~ 무한루프 안빠지는구나... 의외네 ..  자. 부모에서 위로 올리는 방법. 끌올이랬지? 여기도 emit을 쓸까요? 글쎄요... .... . .... .... .. .. 아... 위에서 만들어준다음 아래로 내려서 거기서 리턴한다고? prpos로 핸들러에 담아 내려주고 값받아서 재정의한다. 으흥. 체인을 걸어서 또 위로 올려 app.js 까지 올릴 수 있긴하겠네. 관습은 on어ㅓㅉ구로 정한다. state 끌올~ (State up -lifting 이라 부르기도 함.) 아무튼 컴포넌트간에 직접적인 전달은 없긴함. 그치만 맨날 루트로 끌어오리진 않고 필요한 트리까지만 올리면 된다 'ㅅ' - 아... 사용자 지정으로 prpos 정해서 투방향 바인딩하는게 이 이래서 중요하군.