코르시카's Blog

■ setState의 위치 ※ 반드시 main.js 의 render( ) 밖에서 이루어져야함 밖에서는 몇번이고 mutiple update 가능 하지만 render( ) 부를 때는 state / props가 바뀔 때 이므로 고정 된 상태에서 call 되어야 하고 결과적으로 render( )안에서는 setState등이 불리는 구조면 안됨 하지만 하위 component의 props change에 의한 상위단에서 callback을 불러 setStage를 부르는 경우는 하위 component의 변경을 받는 것이므로 OK ■ delete Controller 소속이었으므로 controller component 안에서 다음과 같이 구현 > delete가 아닌 경우 callback에 의해서 setState가 불리고 th..

■ Update 기능? > read + create 를 합친 것 > 기존의 contents를 불러와서 수정하는 것 > 이를 위해서는 기존 contents의 "read" + 수정하여 put하는 "create"기능이 합쳐져야 함 ■ 구현 create에서 마찬가지로 원본은 보존, 업데이트할 contents의 index를 구한 후 new Object로 교환 ■ Input tag의 Placeholder vs Value attribute Input tag에서 Placeholder은 그대로 text area에 dummy value를 표시해주지만, Value attribute를 사용하면 text 원본을 가져와서 표시 ※ 다만 props 값은 readonly가 원칙이므로 바로 value에 JSX로 값을 읽으면 다음과 같..

■ Create에 Form 추가 1) form 태그 생성 + 하위에 input - submit type 추가 > 위와 같은 구성으로 form 태그 안의 내용을 원래는 서버 등에 보낼 수 있음 > 서버의 주소는 form tag attribute에 넣으면 됨 action = "server location", method = "get / post" (post URL에서 보내는 값 노출 안됨) onSubmit = "callback for submit from input tag" ( form태그 하위 input-submit 클릭시 호출되는 콜백 ) 2) App.js에서 props로 하위 component 값 받아오고 업데이트 > new object를 list에 추가해줌 > 기본 JS method 사용( push ..

■ CRUD create, read, update, delete의 관점에서 필요하기 때문에 create가 중요 ■ Delete 기능 > link 구성이후 reload기능 끄고 주소를 a tag를 사용하는 경우 - create, update 경우는 상관이 없는데, 만약 미리 방문하는 addon등을 사용자가 쓰는 경우가 있을 수 있으므로 delete 기능은 다음과 같이 input 형태로 기능을 추가 ■ 실제 mode 수정부분 component 추가 - Contoller component 작성 - mode에 따른 state 변경 Component 매써드 setState( ) 함수 이용 ■ Mode에 따른 영역 reloading 1) App.js에 JSX를 받아올 변수 선언 2) JSX로 mode에 맞게 com..

■ Component에 Event 전달법 > Main component에서 하위 component로 이벤트 전달하고 State 변경하는것이 필요함 ( 모듈단위로 component를 구현하고 있기 때문에 ) 1) Main component level 에서 state 변경할 함수를 설정 + 이 함수를 props로 하위 component가 access할 수 있도록 전달 2) 하위 component에서 event를 생성한 후 click시 상위 사용자 event State 관리하는 함수를 call ■ 하위 component에서 상위로의 정보전달 1) 하위 component에서 부를 때 parameter를 전달 2) 다음과 같은 3가지 방식으로 전달 > (1), (2) 번은 ev object를 받고 안에서 targ..

■ State / Props와 Render의 관계 > Render 메써드에 state나 참조하는 props가 있을 시 state나 props가 어떤 방식으로던 변경이 이루어지면 render가 재호출되며 처음부터 다시 페이지를 그리게 됨 ※ main Component의 render가 reload되면 하위 component들이 가진 render 메써드도 차례로 다시 호출 됨 ∵ ▲main Component는 state변경으로 인해 reload되고, 하위 component들은 그 state에서 props를 받으므로 차례로 변경되는 것 ■ Mode 도입 > Mode에 event를 설치하여 반응형으로 만드는 방식은? ■ Event 추가 > a tag로 href가 있으면 클릭시 reloading이 되므로 event..

■ Data State로 전달받기 > Component 가 data를 받는 것을 다음과 같이 작성할 수 있음 ※ 완벽히 적절한 데이터 전달방식인 것인지 모르겠으나, 아래와 같이 array안의 object들로 받음 ■ Component 내부 여기서는 TOC 컴포넌트를 예시로 들고 왔음 ※ 특이한 점 : 1) push할 데이터 자체를 JSX로 해도 무방 ( [흰색 박스] 안을 string으로 주면 변환이 안되고 그대로 string으로 전달 됨. JSX로 줄 것) 2) [주황색 박스]HTML element를 직접 생성할 때는, key 값을 주어야 React 내부적으로 오류가 생기지 않음 ■ State와 Props 사용의 장점 모듈단위로 분리가 되고, 그 값을 state에서 주입하므로써 재사용성 용이해지고, H..

■ 사용자 & 구현자 1) State : 구현자가 사용자를 위한 system의 상태관리를 위한 것 2) Props : 사용자 입장에서 보여지는 component API를 조작하기 위한 것 ■ Component를 state로 관리하기 > State는 App.js 등에서 주는 값으로 치환 > Component라는 class + props를 한 객체로 바라보고, state에서 props로 가지는 값을 하위 component에 주입하는 방식 > 상위 App의 State를 하위 Component로 전달하는 방식 ※ Props + component 활용된 부분 ■ Class의 Super란? 1) 정의 : 클래스를 생성할 때, 부모 클래스의 기능을 활용해서 메서드나 변수를 선언할 때 super를 사용 2) 사용 : ..

■ Component 파일관리 > 수천개의 component들을 모아서 관리하고 싶을 때 (원래는 index.js에 모여있는 등 관리 안되면 어려움) 1) 위와 같이 JS 파일로 분리 2) class defenition을 해당 JS에서 한후 export default Subject; 로 외부에 전달 3) App.js에서 import 하여 render 해줌 참조 : www.youtube.com/watch?v=8hGqznPGVc0&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=15

■ Component와 Props > Component : 사용자가 지정한 요소들 전체를 들고있는 큰 묶음 > Props : 사용자가 사용하고자 하는 Component 안의 요소들을 추가적으로 param을 통해 값을 외부에서 주입하고 싶을 때 사용, 그때 주입되는 attribute에 대입되는 대상을 props 라고 함 > 이를 통해 Component의 재사용성을 높일 수 있음 ※ never used 의 lint warning 경우 : // eslint-disable-line no-unused-vars 를 error 줄 옆에 추가 참조 : www.youtube.com/watch?v=pPCC2JWbPgk&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=13