react update 리액트 업데이트 구현

나령 윤기도

지금부터 업데이트 기능을 어떻게 구현 하는 거를 살펴 보겠습니다. 업데이트는 크리에이터와 리드를 하이브리드 해서 구현하게 됩니다.
그래서 난이도 면에서 상당히 높지만 업데이트를 할 수 있게 되면 크루즈는 탈주하는 것이라고 해도 과언이 아닙니다.

React 대표적인 로고

자 그럼 먼저 할 것은 업데이트로 가는 링크를 추가 해야겠죠 자 어디에 하면 되나요 .
자 a 태그 추가 했고요 업데이트 그리고 포문은 내용은 업데이트 자 이렇게 해서 업데이트 링크를 추가했는데요.
보기에 클리닉 업데이트가 너무 떨어져 있죠 그리고 그레이트 저는이 둘 다 컨텐츠 변화를 오퍼레이션입니다 그래서 목록으로 먹고 올게요. 여기 있는 업데이트도 Li 태그로 감싸줍니다.
그리고 업데이트 워크레이트는 딱히 순서가 중요하지 않기 때문에 UA 톡으로 감싸서 목록화를 시켰습니다 다음에 업데이트를 할때는 업데이트 하려는 대상이 있잖아요.
css는 아이디가 뭐니 플래시 업데이트 슬래시 이렇게 하는게 더 좋아하겠지 올라가는 개발자 그 페이지로 이동 가진 않지만요 이런 형식을 지켜 주는 것도 있거든요.
또 하나는 업데이트라고 하는이 기능은 상세보기 페이지로 들어갔을 때만 노출되고
웰컴 페이지에서 나 안 보이게 세련 된 구현이 있겠죠 그럼 어떻게 하면 될까요?
콘텍스트 맥락적으로 만들어지는 맥락적으로 노출되는 아이라는 뜻이죠.
그래서이 컨트롤은 리트가 모드일 때만 나오게 하고 싶어요.  그랬어 리더와 같을 때 컨텍스트 컨트롤이 여기 있는 이유 RUN 위치 에다가 이렇게 갖다 놓는 겁니다.
그럼 어떻게 돼요 사용자가 홈으로 갔을 때는 업데이트가 없는데 상세보기로 가면 업데이트가 나타납니다. 여기에 리드로 접근했을때 진입했을 때만, 컨텍스트 컨트롤이 세팅 되기 때문이죠.
그리고 또 하나는 우리가 업데이트를 클릭했을 때 그 업데이트에 고유한 ID가 있을 거 아니에요.
아이디를 저 수소에 다가 추가해 주면 더 좋겠죠.
그래서 저는 여기에다가 아이디 깝을 추가해 주었습니다.

Reactjs.org logo

그러면 보시는 것처럼요 밑에 여기를 보시면 어때요 물론 클릭해 봤자 url 이 바뀌지는 않지만 이런 형식을 지켜 주는 거예요 우리가 업데이트를 클릭했을 때 어떻게 돼요 크리에이터 똑같습니다 on 클릭 이벤트 자 여기서 클릭을 막아요죠.
이벤트 prevented 디포이트 셋 모드로 업데이트로 이동하게 하는 거예요.
그러면 어디로 이동하나요 우리가 어디를 바라보면 될까요.
샘 모드가 업데이트 일 때 어떻게 한다 어떻게 해요 컨텐트를 업데이트 일 때 어떻게 한다 컴포넌트 내용을 구현해 보자고요 코드가 많이 복잡해 졌네요 벌써 저기에서 펑션 업데이트 자 이렇게 했구요 자 그리고 리턴값으로 우리가 뭐 하면 될까요 자 크레이터란 거의 똑같아요 그래서 크레이터를 저는 카피 했습니다 그리고 붙혀넣기 했어요 물론 에러가 지금 뜨긴 하는데 어쨌든 붙여 넣기 했고요 빼빼로로 보니까.
이플러스 가정이 되어 있지 않기 때문에 에러가 났어요. 그래서 크리에이터 호출 하네요 근데 우리 업데이트 컴퍼넌트는 프로 쓰라고 하는 파라미터가 없기 때문에 여기 프로세스를 일단 이렇게 지정을 해준 거예요. 그리고 업데이트 컴퍼넌트의 정 입으로 가서 보면 지금 뭐가 필요하다고 되어 있나요 자 보시는 것처럼 프로푸스 온서버 미스 됐을 때이 프로세서로 온 크리에이터 해 주고 있거든요.
그런데 우리는 크레이터가 아니라 업데이트 작업이니까 온 업데이트 하고 처리를 했었습니다.
업데이트 컴포넌트를 사용하는 쪽에서도 사용할 때 온 업데이트라는 프로폴 전달 해야겠죠.
자 그럼 한번 볼까요 자 여기에서 온 업데이트는 함수이 함수는 타이틀과 바디 값을 전달하는 함수 이 부분 여기까지 일단 하고요 자연 그리고 여기 있는 크리에이터 여기는 버튼 이런 것 좀 바꿔야 되겠네요.
업데이트 컴포넌트를 다시 왔습니다.
이 부분은 업데이트 바뀌었구요.
그리고 서브밋 버튼의 벨류를 업데이트로 배치했습니다.
다음에 우리가 또 해야 할 때 할 것이 아주 중요한 부분입니다.
지금 지금 기본적으로 업데이트는 수정이기 때문에 폼의 기존의 내용이 담겨 있을 필요가 있습니다.
그러면 업데이트 컴퍼넌트가 기존의 내용을 가지고 있기 위해서는 우리가 뭘 해야 될까요.
여기에서 업데이트 컴퍼넌트 가 타이틀과 바디에 값을 기본적으로 가지고 있을 필요가 있겠죠.
저걸 업데이트 컴퍼니 타이트가 바디는 어떻게 알아낼 수 있을까요.
우리가 이전에 드릴 때 여기 있는이 코드를 통해서 title과 body 값을 알아냈던 기억 나세요.
그리고 업데이트 컴퍼넌트가 시작되기 전에 코드를 붙여 넣기 했고요.
여기에 있는 타이틀을 타이트 프롭값으로 주고 여기는 바지를 바디프로필 값을 줬습니다.
그럼 업데이트 컴포넌트 화이트가 바지가 없이 흘러 들어가겠죠..
자 그럼 프로세스를 통해서 들어온 값을 위 타이틀에 줘 볼까요.
밸류값을 타이틀 이렇게 했습니다.
자 그럼 다음에 바지 값도 써야죠 바디도 대류를 쓰는 것 여기다 쓰는게 아닙니다.
짭프로 소의 마디를 주면 보시는 것처럼 본문이 나타납니다.
그런데 거기서 이상한게 있어요
여기다 입력을 했는데. 아무런 변화가 없습니다 왜 react에서 프로필 하는 데이터는 사용자의 컴퍼넌트를 전달하는 일종의 명령이죠.